…is a good idea, I’m telling you.
I’ve created this page to attempt to convince you. It shows examples and lists six reasons why it’s a good idea and three common arguments against them (some of which I refute).
Don’t need convincing? Here’s big roundup of them
Wait wait wait. You are using a font, that is icon-based to display the actual…uhhh icons?
Awesome !
thx chris
agree with Trickat is awesome. thanks for sharing.
I would expect the primary argument for “SVG is better” to be that you can have non-monochromatic icons.
The biggest issue with SVG is that it is totally unsupported by Android’s stock browser, so a huge chunk of mobile users will be left out.
On firefox 8.0 this not work now whe your use base64 encoding for font
eq.
@font-face {
font-family: “ico”;
font-style: normal;
font-weight: 500;
src: url(“data:font/opentype;base64,T1RUTwALAIAAAwAwQ0ZGIH4UPXMAAAR8AABDyEZGVE1d7…..
Great idea!
Don’t forget about basic html entities either. For example, phone and fax (print) (can’t increase font size in comment, but you get the idea):
☎ ⎙
I’ve seen a font which is used as an icon in the example of navigation menu with CSS3. And I think it’s very awesome:
http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/
this is very nice …. =)
I realize this blog post is rather old but it disagrees about the pseudo element accessibility fix claiming that it doesn’t work with screen readers in practice (although it probably should): http://filamentgroup.com/lab/dingbat_webfonts_accessibility_issues/
You can add in “Common Arguments Otherwise” that you can only produce “one color icons”.
Using fonts for icons is a great way to achieve scalability. The only limitation being colour (and possible compatibility with dinosaur browsers).
Great idea. Where can I see a full list of these type of font icons?
Wicked stuff!
I’m creating pages in Sharepoint and I’m wondering how I could use CSS in content editor web parts.
I want to use them to hyperlink to other pages. No fancy programming. Just want to use the code to create beautiful buttons, tweak a few parameters and use my links.
Can you point me to a solution with some instructions? I’m a baby developer… ;)
BTW, the DEMO page with the sliders is AWESOME! As well as this site.
Thank you
With a little investigation, it looks like I should put the CSS code in a text (or HTML?) file and note in the code window of the content editor web part.
So going back to my original topic, is it possible to have everything in one text file and make it work? How?
:)
Great!
Awesome stuff! It’s hard to argue against it, because it’s simple and effective. I use something like that on my blog to do sharing icons for rss, twitter, facebook – another advantage is that you can integrate it easily with the design of the site, by using the same font as the heading.
This is the best idea and looks awesome for websites.
I have been working on the idea of doning something like this for at project but so fare i haven’t used it yet and there is one very good reason for this that you don’t address in this article!
And that is the fact that webfonts dosent render then same way in different browsers, and therefor i haven’t used it yet beacuse i had to make a lot for CSS tweaks and hacks to make sure that en result is the same i all browsers…
But the idea is great and i’m sure i’m going to find a project where i can use this in the future, but for now i’m sticking with sprites…
Awesome post chris ! just got the post by mail and loving it a lot !
I also would like to appreciate the nice use of social buttons on the post bottom ! by you !
It would be great if you make simple application for us like the button maker ! so that we can choose a specific icon with custom width and other properties ! and your app will roll out its code !
Hi! here is a free icon set using @font-face : Raphael icon set. Have a look, I use it on my portfolio. Cheers
Is it me, or is there a problem with Tumblr and fonts? This works in Opera and Chrome, but not in Firefox or IE.
I love it but I dont know who this works, where do you get these letter/icons in the first place. it might be a thick question, sorry
sorry about that, I get it now, that was stupid of me:)
great great idea
There is a big problem with this method if you just use a large font like pictos. This font contains a lot of icons that you might never need in you web page. This is why I made a font generator for making “IconFonts”. This tool allows you to select the icons that you want, and then you can assign them to different letters. So the result would be much more efficient. You can check it out here: http//keyamoon.com/icomoon/
See this live demo page too: http://keyamoon.com/icomoon/#toDemos
“b Loading”… What’s that supposed to mean? ;)
That ‘b’ may only appear temporarily while the font is being loaded. Nevermind the loading; check out the website after the loading is finished.
No, that “b” will always appear while me and others don’t allow certain resources, by using something like NoScript for example.
I knew what the problem is, and now so do you: font icons rely on JS code serving them. No JS, no custom fonts, no web fonts, no icon fonts.
Just for the record, @font-face absolutely does not require JavaScript.
Under the hood it does. @font-face is an embedding relying on JS code.
For the record, your h1 kulturista-web-1 doesn’t show in my NoScript protected environment :)
Nope, it doesn’t. CSS-Tricks custom fonts do, because they are served from TypeKit, which does it’s thing via JavaScript. But @font-face itself does not require JavaScript.
To confirm, go grab an @font-face kit from Font Squirrel, like this: http://www.fontsquirrel.com/fonts/Cloister-Black
Open up the demo.html file in a browser where you have JavaScript turned off. The custom font should show up fine. (I just did it and it did).
Are we still talking about NoScript?
OK :)
Obviously, NoScript is not at the top of your choices.
This post made me think though.
Oddly enough, browsers don’t have *yet* a native built in method to assist users that want to prevent @font-face resources from loading.
I guess sometime in the not so distant future they will have one too, like in the case of images, styles, add-ons etcetera.
As Chris has said font-face does not need Javascript so there’s no need for a noscript hack. It has absolutely nothing to do with Javascript. I’m not sure why you would want to disable font-face, either. Having said that I think web designer should think strongly about the legibility of certain fonts for those who can’t see so well – maybe if you use strange, decorative fonts you could have some sort of option on the site to turn them off for users who find them hard to read.
Apparently you too aren’t a big fan of NoScript: http://noscript.net :)
My whole point revolves around the fact that @font-face means, in fact, a downloadable resource.
Such downloadable resources, like Javascript, images, ActiveX, style sheets, flash can be stopped from loading using standard browser options.
So far, to my knowledge anyway, only NoScript offers you a option, as a user controlling its own environment, as it should normally be.
My guess is @font-face will soon be put to scrutiny and an option would be included for it too, so that the user can have its say over what goes on its machine and what not.
Maybe you don’t believe in this stuff, but, for me, for various reasons, security and otherwise, it’s actually more important than responsive layout or accessibility.
Consider this one aspect:
Somebody uses @font-face to replace on your machine what is normally a letter with a custom offensive symbol.
Hoax or bad intent, it’s an open gate for abuse.
The list can go on, since, unfortunately, imagination has been a tool serving evil as much as it has been a tool for making good.
On a more light and childish note:
Using custom web fonts, a message that reads “I am writing an article about @font-face” in a normal font face, could magically turn into a secret love message or a spies message by replacing glyphs in the custom font being served only under certain conditions: logins etcetera :)
It should work, in theory at least.
In practice, “*dings” fonts just didn’t work. Why should that change now?
Never mind (again) the occasional rendering ugliness, which pretty much hurts your design rather than helping it. Which is the strongest point that makes me believe font icons will never work.
It works in practice. Look at the icons on my navigation bar for example.
http://keyamoon.com/icomoon/
They are all done using this method. I have tested this in all modern browsers as well as IE8 and IE7.
Depends on the practice, I guess :)
Wow this is awesome, I have emailed our development team to start using the information within this article. Once we have used this information in a project we will share this and show you what we have been able to do.
For accessibility, there is one good solution that just came into my mind.
For those Screen readers that actually read the css content, we can do something like this:
So this way, these screen readers will read ‘Home’ for our icon. Assuming that our font has a home icon for letter ‘H’, an icon will appear properly.
Clever thought, but a lot of things could go wrong there. For one, if the link’s text was already home, the screen reader would read “home home”. For another, it’s also a gamble if 1em will be exactly the width of one icon or not (I think).
Still, I like the thinking on this issue. I actually think the solution is mapping the icons in the fonts to characters that aren’t read by screen readers.
Yeah I thought of that “home home” problem too. Maybe something like “home icon – ” for content would work better? Still sounds kinda odd :/
There shouldn’t be a problem with that 1em though. Because if all the icons present in our font fit in a square (icons usually do), then they all have the same width, which is also equivalent to 1em.
But yea, it’s a little tricky. I like your solution of mapping icons to letters that won’t be read by screen readers. I might use this for my font generator.
YES i totally agree. It sure is an awesome idea, really time saving and much more efficient as you point it out .
So thanks!!!!!
Using junk letters for icons just doesn’t sit right with me. Not just for screenreaders, but people without Javascript and search engines. Keeping them to pseudo-elements is fine for now, but we know that many developers will misuse them. At some point, screenreaders and search engines will be smart enough to read pseudo elements.
It would be better if the icons were on Unicode characters – there are a bunch of “free” positions to use for any characters and you could use better icons for existing characters (like the ☎ that Corey posted above, could be a mobile phone icon). Heck, even punctuation would be a better option than A-Z.
I’m using this technique in http://lightglitch.github.com/bootstrap-xtra/ but I’m having problems on how the font is rendered in linux which appears to be different from windows.
Did you face this problem? And how did you solved it?
why not to use utf-8 symbols rather than letters?
for example: http://www.fileformat.info/info/unicode/block/miscellaneous_symbols/utf8test.htm
♠ ♡ ♢ ♣ ♤ ♥ ♦ ♧ ♨ ♩ ♪ ♫ ♬ ♭ ♮ ♯
the square no found symbol will not apear if the symbol is defined in the font
Unicode is a much better, reliable way of serving icons, and it ensures that users become accustomed to certain symbols meaning certain things, instead of everyone using their own silly iconography typefaces to possibly infer completely different things. Additionally, screen readers already know how to pronounce the characters.
Not sure why Chris is condoning this practice, since web type alone renders horribly on Windows machines and even on a Mac, if you adjust the font size from the 62px in his example down to a much more reasonable 10-12px for icon purposes, they get fuzzy from the anti-aliasing, canceling out the purpose of using them anyway. I want as much as the next guy to be able to incorporate something like this, but right now it doesn’t look good at all and is just another way for the uneducated designer to confuse/frustrate his users.
http://www.personal.psu.edu/ejp10/blogs/gotunicode/2009/08/accessibility-and-unicode.html
This article is a few years old, but I think it is still entirely relevant.
amazing post and you have really amazing command over CSS !!! do you provide tuition for that ?? :D if you do i would like to subscribe for your class :) even professors of our college does not have this much command over CSS :)
I’ve experimented with using fonts to make cool little loading icons, instead of animated GIFs. Unfortunately, not all circular icons have their center actually in the middle, so a lot of them rotate off center. However, I did have some success. You can see my mixed results here: http://jsfiddle.net/GXJnN/7/
Yeah, they aren’t perfect, but there’s a couple there you could definitely use and the off-center problem is not as noticeable when they are shrunk down to a smaller size.
Enjoy!
cool
HAHA, love that demo-page!
Agree, this is the way to go. Very cool.
Great tutorial!
i’m already using this technique, but i’m afraid with just one thing: the use of the pseudo-selector :before, anyway, i know it will only affect the users in questions of accessibility.
Regards!
This is so cool. May have to look at ways to use it myself.
This is awesome. Period.
Genius! Anybody know of any Google Web Fonts that contain good icons/dingbats?
Awesome work, as always Chris. I was fired up to use fonts for icons back when we started jQuery Mobile, but support was spotty. This got me fired up again because it’s been more than a year so I tested your demo page on a broad cross-section of mobile devices here at the lab. I thought I’d share the results:
https://github.com/jquery/jquery-mobile/wiki/Fonts-for-icons—support-on-mobile-browsers
In a nutshell, loading custom fonts works on a lot of newer mobile platforms, but Blackberry, WebOS, older Android and iOS all fail to load the font you you’re left with the default font set and th odd characters instead of icons.
So this is only viable if we can figure out how to only apply this technique to browsers that support it because it doesn’t fail gracefully. If we can crack that nut, this is golden.
This is pretty darn awesome :3
awesome i have much css code but always i forget to use in the exact time any one can tell me easy way to memorize lots of code thanQ
Maybe I’m repeating someone else’s conclusion or stating the obvious, but I cant help but think how very unfriendly this method must be for screenreaders.
Offtopic: Is there a way to be notified when someone replies to my comments? I usually forget to check on them as soon as I hit Send.
well this what u showed the reason it for me or some one else
Can’t find any information about total font weight
For font designers, in order to avoid using arbitrary characters for CSS icons when there’s no clear Unicode equivalent (which may be the case half of the time), the ideal solution is to use the approach of many OpenType fonts: map generic ornaments as alternates of the ‘bullet’ character (U+2022). OpenType features can be accessed in CSS3 with the
font-feature-settings
property, yet currently only Mozilla Firefox engine (Gecko) supports it and in a experimental way.I have solved the problem with screen readers. My Icon-Font Generator now features an option for assigning your icons to the “Supplementary Private Use Area” of the Unicode. Watch this short video demo to see how Apple’s VoiceOver reads a page with an icon font. You can see that VoiceOver does not read any extra letters. With this update, IcoMoon is the first, and right now the only icon font out there that is fully compatible with screen readers. You can download a free version if you are interested. This package features 40 icons at the moment but more will be added over time :)
How do you deal with the font smoothing in IE and Firefox?