Icon Fonts: Showing Icons without their Associated Text
Say you’re using icon fonts, and you have something that looks like this:
The icons to the left of each link are created via an icon font.That’s all good and well, but what if you don’t want to show the actual “list” and “calendar” text, though you still want it to exist in your HTML. Essentially, you want to replace the text with just the icon itself. Like so:
The text is gone, and we’re left with just the icons, which still work as links.It’s not all that easy to do, particularly if you’re used to replacing text with background images. Here’s how you can achieve that:
.icon-replacement {text-indent:-999em; overflow:hidden; display:block; position:relative;}
.icon-replacement:before {position:absolute; left:0; top:0; text-indent:0;}Basically, we’re using text-indent to bump our block level anchor tag text out of view, and then positioning and negation of that indent on the icon itself to bring it back into view.
Now, to be absolutely clear, that doesn’t actually add any icons. I use the code provided by Icomoon, along with their app, to generate icons and display them on my sites. Here’s the full CSS and some example HTML one might use:
@font-face {
font-family: 'icomoon';
src:url('assets/icons/icomoon.eot?r304po');
src:url('assets/icons/icomoon.eot?#iefixr304po') format('embedded-opentype'),
url('assets/icons/icomoon.woff?r304po') format('woff'),
url('assets/icons/icomoon.ttf?r304po') format('truetype'),
url('assets/icons/icomoon.svg?r304po#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-right:5px;
}
.icon-list:before {content:"\e601";}
.icon-calendar:before {content:"\e604";}
.icon-replacement {text-indent:-999em; display:block; overflow:hidden; position:relative;}
.icon-replacement:before {position:absolute; left:0; top:0; text-indent:0;}And the HTML:
Enjoy!