Comments on: HTML for Icon Font Usage

By: Derek Erb

Derek Erb — Thu, 19 Jul 2012 13:39:30 +0000

I haven’t tried this yet. But I just wanted to add that I certainly prefer being able to define the content in the style sheet rather than in the HTML. As my CSS files are always external this allows me to manage and modify the icon info without touching the HTML pages. If I have an icon in a menu, for example, then I would have to change each HTML page (data-icon=) instead of just changing the CSS file.

Many thanks!

By: John Cheesman

John Cheesman — Mon, 02 Jul 2012 19:44:00 +0000

Great article, I’m using Ico Moon app for a site I’m working on. I’m having trouble replacing the button on my search form with a suitable icon as I can’t nest spans inside it. Is there a way around this without positioning things on top of each other?

By: Keyamoon

Keyamoon — Thu, 07 Jun 2012 14:46:14 +0000

I use H5BP's visuallyhidden class:


.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0); height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

By: Torkil Johnsen

Torkil Johnsen — Wed, 06 Jun 2012 07:48:12 +0000

Great links to those font-tools :)

Didn’t we decide that -9999px was a bad idea, because of browsers having to render a 10000px+ container?

Referring to this:

.screen-reader-text { /* Reusable, toolbox kind of class */
position: absolute;
top: -9999px;
left: -9999px;
}

Seems like perhaps it could be replaced by this:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

For Compass users, there’s also useful stuff here:
http://compass-style.org/reference/compass/typography/text/replacement/

And if you swear to using sprites:
http://compass-style.org/reference/compass/utilities/sprites/sprite_img/#mixin-sprite-replace-text-with-dimensions

By: David Kaneda

David Kaneda — Wed, 06 Jun 2012 01:54:43 +0000

It would appear the Icomoon fonts are hinted against 16 and 32px sizes at least… See the text justification and page-type icons for the clearest example.

Great article Chris!

By: Ben Peck

Ben Peck — Tue, 05 Jun 2012 19:43:19 +0000

I’ve been in the same boat. I’ve used them with image generation tools before CSS could handle font embedding, etc.

I’ve made a list of my favorite ones to date. If anyone knows of more please let me know. http://www.bentdesignstudio.com/v2/2012/05/icon-fonts/

By: Andy Dentone

Andy Dentone — Fri, 01 Jun 2012 17:18:56 +0000

Chris,
This is a great article, and I just used it to create some great buttons for a client. Being able to scale, adjust color, and otherwise control the aspects of the icons is very, very powerful. I was reluctant to try this before because I didn’t want to sacrifice accessibility, but now, with your help, I don’t have to worry.

My client loved the fact that the icon moves a little on hover – I used a simple, quick transition for that. It is the little things that make a site so much more engaging.

Thanks again!
Also, thanks commenters and community – your thoughts and insights are greatly appreciated as well.

By: Carsten

Carsten — Fri, 01 Jun 2012 09:00:45 +0000

Thanks Keyamoon, your font generator works fine on every browser and every platform with the PUA encoding.

By: Brannon

Brannon — Thu, 31 May 2012 20:27:38 +0000

Have you tried it in webkit nightlies? Maybe it will be supported in Safari 5.2 PC.

By: Joeri

Joeri — Tue, 29 May 2012 22:25:17 +0000

Funnily enough, the things you do to optimize for screen readers are, in most cases, also good practice in general.