I would like your opinion on the following subject.I have to provide icons in different sizes and states. The sizes will be 16*16, 24*24 and 32*32.The states bright, dark, disabled and link.Because of browser support we decided for .png instead of .svg.Do you feel this is the best CSS approach for this case? Would you make some changes to improve this styles?<i class=fx-icon fx-icon-home>.fx-icon { /*standard icon size*/    border: none;    display: inline-block;    height: 16px;    line-height: 16px;    margin-right: 3px;    vertical-align: top;    width: 16px;}.fx-icon.fx-icon-medium {    height: 24px;    line-height: 24px;    width: 24px;}.fx-icon.fx-icon-large {    height: 32px;    line-height: 32px;    width: 32px;}.fx-icon.fx-icon-larger {    height: 48px;    line-height: 48px;    width: 48px;}/*Icon Home*/.fx-icon-home-bright,.fx-icon-home-dark,.fx-icon-home-disabled,.fx-icon-home-link {    background: url(images/icon-home.png) no-repeat;}.fx-icon-home-dark {    background-position: -16px 0;}.fx-icon-home-disabled {    background-position: -32px 0;}.fx-icon-home-link {    background-position: -48px 0;}
Iconography - How would you improve this?
css