With font awesome, you are automatically using all of the icons however most sites likely use about 1%-5% of the total available icons. That means using font awesome is an unnecessary bloat on most sites. It would be nice if you could download each icon as a separate SVG (maybe you can, I didn't see how).
I prefer to find the SVG elements I need and base64 encode them directly into my CSS. That way you only include the assets you are using, minimize total KB and network requests. There are two tools I use to help with this:
These ever-growing icon fonts make me wonder whether the Chinese were on to something when they designed their logograms. With 439 icons in this font alone, it might be possible to start writing simple prose using nothing but icons. Some extra icons are clearly needed to add concepts not normally expressed in icon form (personal pronouns, etc) but those are easily designed or borrowed from logographic scripts.
"They lived in the L.T., which according to Harv was short for Leased Territories in letters. Nell already knew the mediaglyphics for it. Harv had also taught her the sign for Enchantment, which was the name of the Territory they lived; it was a princess sprinkling golden specks onto some gray houses, which turned yellow and bright were the specs touched them."
-- The Diamond Age, Neal Stephenson
I had to look it up -- I remembered the mediaglyphs as being part of the narrative in Snow Crash, not Diamond Age.
I absolutely think the Chinese "were on to something" -- it might not be commonly known, but one of the reasons for why Chinese (language) uses signs, is so that you can read text written by someone with whom you don't share a (oral) language. An efficient way to control an Empire that spans some 5-600 languages. Contrast with teaching all officials to speak and write Latin for example.
Beginner question: Is there a way to manually remove the characters from the font files that aren't used to increase speed? Or, is this hosted on a CDN by someone?
One thing to be aware of when using these fonts as I discovered on a large project today: this font won't work on windows phone 7 devices. Whilst these devices don't have much market share in the US it's quite a bit more in Europe (particularly the Nordic countries).
The reason is that wp7 doesn't support font-face. The fix is to hide the opacity of the :before pseudo selector that sets the content of the dom element. Then you still reserve the space and then set the actual element to a background of the svg for the icon.
It's a lot of work if you are using many icons but the alternative is unusable squares all over your application for WP7 users.
Gotta wonder if some of these new icons wouldn't have been better off split-up. Most people recognize the PDF file icon as a white box with a black outline but with a red symbol. Likewise the green W for Word.
You might be surprised there. The fonts don't show up for those who use NoScript in default-deny mode (which is the suggested, and default, mode for this popular extension) either. Yes, this is solved by allowing the specific script (which?) to run for that page. I generally just leave the page as it is, showing funny characters instead of the intended icons.
Serious answer: those sites which insist on being unusable for those who don't run scripts - be it those running text-based browsers of those who block scripts - are not worth visiting in my not that humble opinion.
I deem a site to be usable when the content can be read. Sometimes this means scrolling through an un-styled list of links and sundry before I can read whatever the site tries to convey. So be it.
Image based icons will similarly fail for people who don't enable images in their browser. In other news, this is a much faster way to load and display icons at appropriate resolutions for the 99.99% of the interest who can view fonts.
Doesn't Firefox come with custom fonts enabled by default though ? It has always been displayed correctly for me and I never had to switch anything on or off.
Could the same goal be achieved with custom fonts disabled ?
Perhaps. I think he was implying that he turned it off manually. I don't think it can shown with custom fonts disabled, as it is an icon set as a custom font.
https://fortawesome.github.io/Font-Awesome/icon/pied-piper-a... https://fortawesome.github.io/Font-Awesome/icon/pied-piper/