Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Lessons:27Length:3 hours
  • Overview
  • Transcript

2.4 Using Icon Fonts

In the previous lesson, I talked about Google web fonts and showed you how to use them. Now, some fonts will use icons or pictograms instead of letters. These are called icon fonts and are used on a large scale nowadays, because they can be scaled without losing quality. They can be colored in any way and they're really easy to use. Now when it comes to icon fonts there are loads of options available. Simply google icon fonts and you'll get lots of hits. However, if you want some good quality icons I recommend using any of the following three. The first one is Font Awesome and it's an icon font designed for Bootstrap, you can get it at fontawesome.io. The second one is Entypo, you can find it at entypo.com and this one also has a bunch of icons. The third one is IcoMoon, you can find it at icomoon.io and you can find three icon packs here. You can find a free version, an essential pack or an ultimate pack. Now the ultimate pack, I bought this actually a while back and it has some handy Photoshop shapes. Basically copies of the icons which you can use in Photoshop as custom shapes if your using icons a lot than this will be really useful to you. Now personally, I've been using Font Awesome for a while now so I'll quickly show you how to implement it. First of all, I have a, a basic page here and I wanna include some icons. First thing you gotta do, you go to the get started button and this will give you a few ways to include the font. The easiest way is just to copy this link and that's what I'm gonna do right now so copy this. I'm gonna paste it in my head and I'm gonna add HTTP here because I'm working locally. Now, this will load the font-awesome.css from the bootstrapcdn so basically whenever you load your website this font will also be loaded. Now how to implement it? Well it's easy. Let's see some examples. You need to place the Font Awesome icons with the <i> tag.</i> So, just gonna copy this, gonna paste it right here. So, I with a class of fa with stands for font awesome. fa-camera-retro so let's refresh our page. And there it is, that's our icon. And you can do this you can copy and paste and create how many icons you want. And you can also choose different icons so if you go to icons you will see a full list of the icons. And if you want one of them simply look at it's name, for example fa-check and I'm gonna change it right here to fa-check. Let's see another one fa-cogs. [BLANK_AUDIO] And another one, fa-lightbulb-o, 'kay? Let's refresh. Lightbulb and now we have four different icons. Now, if I want I can take this for example, I can add my own class, demo icon and I can style that icon. So demo icon and I can increase its font size. Let's say to 55 pixels, so now the first icon will have a much bigger size and I can also change its colors. So color red, there you go and you can also do all sorts of effects to it add shadows, add gradients. Basically, whatever you can do to a text you can do to these icons and that's it, basically. Now, whenever you need to use icons in your designs please consider one of these fonts since it saves you the trouble of generating images and just loading your website unnecessarily. I mean, why use an actual image like a JPEG or a PNG that will increase your website's load time? When you can use on icon files. This is scalable, you can change its color to whatever you want, It's better overall. Now in the next lesson, we move into the Photoshop sphere where I'll show you some handy actions that will speed up your work flow.

Back to the top