Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
Icon fonts are a fast, effective way to feature scalable vector artwork on websites. James Williamson shows you how to properly deploy icon fonts on your own site in this short course. Learn how to find an icon font that's right for you and style it so it appears exactly the way you want. Then learn about deployment options that will make your icons accessible and display consistently across multiple browsers and devices. James also introduces advanced styling options such as animated and multicolored glyphs.
Want to create your own icon fonts? Check out James' companion course, Creating Icon Fonts for the Web.
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.
Now in this exercise, I'm using a version of the icon font that we will be using throughout the course, that's mapped to basic Latin characters. So the symbols themselves are basically replacing letters, a, b, c, d, so forth. This one as a matter of fact is replacing h for you guessed it, home. So right now it's being displayed through the use of a class. And let me take you into the code and show you that. So, I have a class called icon. It's defining the font-family as chunky_latin. And down towards the bottom, you can see, I have a span surrounding that h with a class of icon. Now in my Styles, if I scroll down all through my font-face declarations, I can see that I have one for chunky_latin.
And then I'm just pointing to it. So this is the normal, everyday at font face declarations syntax that we talked about in the last exercise. So now we want to add some base 64 encoding to that. So how do you do that if the font you grabbed doesn't already automatically have that option? Well there are a lot of online services, so let me go back up to my browser for a moment. And I've got a little link here to a website called Mobilefish. This is one of my favorite online data 64 encoders. Mobilefish.com has a nice little service.
There are a lot of them online, and some of them, I've found, do a great job with images. But this is one of the ones that I've found that does a great job with both images and fonts, so I really like using this one. Although if you do a quick search for Base64 encoders online, you're going to find a ton of them. So I'm going to scroll down to this little form down here. Here we go. And I can either paste in a binary source data here or I can choose a file. Of course, we're going to choose a file. So I'm going to say, Choose file and I'm going to go out and I'm going to, navigate to my Exercise Files folder, chapter two. zero two oh two, and I'm going to go into the fonts.
Now the one I'm looking for is this one chunky latin regular dot w o f f or woff. This a font format that I think was originally developed by Google, it's open source and there a lot of browsers that support it out there. So I'm going to go ahead and choose this one and click open. And I want to encode it to a base 64 string, I wanted to output it in a text box, which is a little bit below this, we can't see it right now. For maximum characters per line, I'm going to go to zero, basically what that allows you to do, it won't put any line breaks in there, I don't think they're harmful, but I'd rather not find out. And then finally I'm going to say e19 here to prove that I am not a robot.
And I'm going to go ahead and convert this. It will take it a second, and when it's finished if I scroll down I will see a very long string of characters in this text box. And there's no way in the world I can see all of this at once. So I'm just going to do a select all and then I'm going to copy it. So Cmd + C, Ctrl + C. You've done that forever and a day. Right? So, I'm going to go ahead and copy this. And then I'm going to go back into my code editor, and open up the base.css file that's in the _css directory, of the 02_ 02 folder. For those of you that don't have online access or couldn't get the converter to work or are having trouble with it, I've supplied you with a little something.
If you look in the _assets folder, in the 02_02. You'll find the same basic 64 encoding just in a raw text file and you can copy and paste from there if you would like. Okay, so using the base 64 the first thing I want to do, is I want to test to see if it's working without loading up any of the other fonts because, when you're testing base 64 and coding if you link out to any other font it's possible that that's what you're looking at and not your actual base 64 encoded font. Alright, so what I'm going to do now, is, in this source area here, what I'm going to do is I'm going to place my cursor right behind this last comma.
Now, I'm want to point out a couple of things here before I paste all this information in. Because, it gets a little messy after that. This is required, in the source URL, inside these parentheses, what you have to do is you have to use data urs specification, which basically says, okay, you have to identify what the data is, and in this case. It's application/x-font-woff, -woff, woff. Character set encoding was utf-8. That's the standard that we use to encode the characters for this. And we're using base64 to encode it, and that tells the browser how to decode it.
It's necessary in this order, and if you want to know more about that, there are a lot of websites out there that tell you how to form this data. So I'm going to place my cursor right there in that print season, I'm going to paste it and, wow, that's a lot. You can see that's the entire font right there in base 64 and courting. Very interesting. Alright, so now you'll notice that for this declaration, I've changed the name of the font to chunky latin 64, so if I save this, and I go back into the HTML file Right now it'd still be using the old declaration, so I'm going to go up to my font name and I'm going to change that to chunky latin64.
So now if I save this and preview it, the only way this home icon can display is if it's using the Base64 encoding. So now we know that that was successful. We know that it's a viable fallback option for us. And we know that it will help us With cross domain issues. So the last thing that we need to do, is go ahead and integrate it into an actual font face declaration, that contains it as simply part of the overall whole. Because you don't want, just a separate declaration just for that. And then I'm going to go back to my html file, I'm going to remove the 64 declaration, then I'm going to go to my base CSS, and I'm going to modify this.
Let's make life easier on ourselves and use copying and paste. That's nice, right? So I'm going to copy, the original font face declaration, and then just below it I'm going to paste it. Now the reason that I'm going to do this, is because we need to get rid of everything except, for the EOT declaration in the first one. Internet Explorer doesn't play well very well with Base64 encoding, so We need to create a separate declaration, for just the EOT files. Now, what we can do at this point is take off every body, except for the true type and the SVG files below that.
So right here where it says Source that's where we're going to put all this stuff. Alright. So again I'm going to highlight all of this. And pay particular attention to exactly where I'm grabbing this from. So I'm copying the format declaration, and up top I'm copying everything from the URL on. Now in source and notice the comma right there. It separates these individual calls. I'm going to paste all of that. So essentially now we have two font face declarations, that we're going to be using for chunky latin. The first one is going to handle Internet Explorer.
The second one is going to provide the base 64 encoding, in case any of the other fonts aren't available. That will help out with again the cross domain issues. And after that, it falls back to TrueType and SVG fonts. So now I can take this, font face declaration, which is now extraneous. And get rid of it. And I know we just did a lot there. I'm more interested in making sure that you understand what base 64 encoding is doing for you, instead of knowing exactly how it works, and where to put everything. Because there's a ton of, of article out there, and information for you that you can go read about the data URI specification.
And you really want to read up on it so if you're doing this yourself you really now how to do it. The other thing you can do is go to a generation service like font squirrel, and run your fonts through that. Even if you don't need to convert the fonts, you can run say your WAF file though, that and it will add to the CCS file that comes out base 64 and coding. And then you can just copy and paste that. So there's a lot of different options for you out there, but right, our font family, this is chunky_latin. Our source is initially the eot file, and then after that it's the, base64 encoding and after that it falls back to truetype and svg.
So I'm going to save this. I'm going to go back to my HTML file, and I'm going to refresh my preview. And indeed it shows up again. so it's definitely working. Awesome. As I mentioned, I really doubt your going to need do your own base 64 encoding all that often like I mention. All those web bot generators out there, have the option of including base 64 as part of the process. However, even if you never have to do it yourself. It's extremely helpful to understand, what Data URI is, and where it fits, in deploying icon fonts.
There are currently no FAQs about Deploying Icon Fonts for the Web.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.