Join James Williamson for an in-depth discussion in this video Adding Data URI for icon fonts, part of Deploying Icon Fonts for the Web.
- View Offline
…In addition to the basic at font face syntax you'll want to consider adding…a base 64 encoded version of your icon font in your declarations as well.…The data URI specification allows us to take small files like images, and…fonts, and then base 64 encode them into a string of characters which we can then.…Place inline in our styles.…This will help cross domain issues with web fonts support, as…well as providing us with a fallback if our fonts aren't available.…
Luckily most of the services out there that provide us with web…fonts Also provide you with an option of including base sixty-four encoding.…But, in the case that's your using a custom icon font that doesn't have it.…Or maybe you're creating one yourself.…I wanted to run you through the process of…adding it, to your own at font face declarations.…Now to do that I'm going to use the base sixty-four html file.…Found in the 02_02 directory and This is it right now in the browser.…So currently at the bottom of the page…there, you're going to see the home icon being displayed.…
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