This is a pretty common feature of a lot of websites and always used to be solved by something like:
.btn {
background: url(../img/icon.png) no-repeat 0 -50px;
height: 30px;
overflow: hidden;
text-indent: -9999px;
width: 30px;
}
Now we have icon fonts, I wondered what peoples thoughts were on using these for icon based buttons? I use them frequently for buttons or lists that have text as well, no big deal if the icons don’t display in older browsers as the text explains then function of the button/link. But if the icon doesn’t display in an older browser, the button is essentially totally useless and the user has no idea what it does?
Maybe it’s not a problem many people care about, after all, it’s probably only IE7 and below, right? I generally don’t have a problem with things not displaying correctly in IE7 downwards, I only support to IE8 but if these buttons are form elements/vital to functionally, maybe they should be applied with a background-image instead?
It’ll be interesting to get peoples views, as I keep changing my as to the approach to take. Ideally icon fonts would be the way but even they throw up issues of alignment/size consistency!
