![]() This can cause screen readers to say things like, “z Twitter,” which isn’t good for accessibility. The alternative would be to use standard characters (a to z, numbers, etc.). Using the private use area for your icons helps ensure that screen readers don’t read them aloud. This is section of unicode that has not been assigned any characters. When you’re done, click the “Font” button at the bottom of the screen to open the font generator.īefore you download your font, you’ll want to reset the encoding to Private Use Area. To get started, head over to the IcoMoon app and select the icons you want. I love the app so much that I paid for it anyways, and I had purchased the Essential Pack months ago. This means you’re only using the icons you need, which keeps the file size down.įull Disclosure: Because I talk about this app so much on Twitter, the guy behind IcoMoon offered me a free upgrade to their Ultimate Pack. More importantly, though, IcoMoon also offers a free app that lets you build your own custom font. ![]() The free version contains more than 300 icons, with paid versions offering over 900. There are a lot of icon fonts available, but I use IcoMoon. Here’s how I implement icon fonts on my projects… Creating the font They can be scaled smoothly to any size, and styled easily using CSS. Because it’s a single font file instead of multiple images, it requires just one HTTP request, which is great for site performance. The one for this site is just 5kb in size. Icon fonts are awesome, and if you’re not already using them on your projects, you should be. This article was updated on Augto reflect the current way I implement icon fonts on my projects, which now includes the use of a feature test. That said, if you’re looking to get started with icon fonts, it’s still a worthwhile read. ![]() I’ve since switched to using SVGs, and I’m not looking back. ![]() It contains outdated screenshots from the IcoMoon interface, and is not how I build sites today. ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |