Join James Williamson for an in-depth discussion in this video Improving rendering, part of Deploying Icon Fonts for the Web.
- View Offline
…One of the main criticisms directed at icon fonts is that…the icons will sometimes look blurry or sometimes overly pixellated usually this…is due to either the icon font being displayed at a…size other then one that's a multiple of its base grid or.…It's more commonly due to anti-alias settings within the browser itself.…Now often, you can improve the appearance of your…icon fonts just by controlling the browser's anti-alias settings.…So, I'm looking at the rendering.…That it changed for from 0 to underscore 04 in my exercise files.…
If I scroll down I can see that I have a series of three icons,…three versions of them each, on the page, and right now they all look the same.…They look a little bolder that they probably should?…Yeah, a little bit, they do.…So this is in Chrome, which is a WebKit browser,…and I want to show you the same icons in Firefox.…Okay, here are the same icons in Firefox.…And again maybe a little overly bold.…I mean, they don't look bad, but they can certainly look a lot better.…So I'm gong to go in my code editor and open up the same page…
Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.
- Finding icon fonts
- Ensuring consistent styling
- Exploring class-based solutions for deployment
- Deploying with the data-icon attribute
- Aligning icons
- Animating icons
- Styling multicolored glyphs