Using Font Awesome Icons as a Font

Standard

Everyone online seems to be a little bit obsessed with icons. Anyone who does a little front end development has an icon set somewhere they can go to for adding them into their website. Font Awesome is one of the largest icon sets out there and they offer an extremely easy way of implementing them into your web projects. If you’ve never heard of them, definitely go check Font Awesome icons out and see what you think.

Their icons are pretty cool. It’s simple to add them into any website as long as you have the font set and CSS referenced correctly. But that is what makes this icon set so special. It actually is a font. Meaning, there are tons of other places beyond websites that you can use these icons! In HTML you need to specify the correct class in order for the CSS to trigger which icon to display. However, if you want to use Font Awesome’s awesome icons anywhere else including your desktop, it is ridiculously easy to implement them as just another font set.

If you have very little design experience, like me, and want to look like you might know something about it, this might help you out quite a bit!

Installing Font Awesome as a Font

Download Font Awesome IconsIf you want to start using these icons in other projects, you will need to download the Font Awesome kit. Just click the download button and you’ll end up with a zipped up folder that you need to extract somewhere on your computer.

After extracting the folder, you’ll end up with the four folders that are required for using them online: css, fonts, less, and scss. We only need the fonts folder, so feel free to delete the rest of them. Once you are in the font awesome fonts folder, you need to install the files that are actually font files. Depending what your preferences are, there are both OpenType and TrueType files for the font in the folder. If you aren’t sure, just install both of them. Give them a double click and install!

Font Awesome Fonts

Now you are ready to use Font Awesome icons basically anywhere you want!

Using the icons in Photoshop, Word, and PowerPoint

These three applications are my absolute favorite places to throw in a few of these icons. It really isn’t that hard and it just takes a few seconds to stick them in there. The icons in Photoshop can be an added design element for infographics or even for some logos, and using them in PowerPoint can be an added visual for your slides.

There are two different ways of adding them. Both are very easy to do and just depends on how you work and what you are doing:

  1. Copy and Paste
  2. Insert Symbol

Font Awesome Cheat SheetIf you have an icon in mind and need to find it from their large list of icons, browse through the Font Awesome Cheat Sheet. This has all 300-some icons that you can copy and paste into your projects. They might show up as weird little boxes (sometimes in italics?) but just highlight them and change the font to “FontAwesome.” Then you’re set!

If you are working in Word or PowerPoint, it can also be helpful just to use the insert symbol tool. Set the font to “FontAwesome” and then double click the different icons you want in your document.

Insert symbol font awesome

The coolest thing about this is that the icons are still font characters. This means you can easily change the size and color of these icons and they still look great.

Font Awesome Compatibility

Now, fonts can be a bit finicky. I have had issues in using this in PowerPoint, but only on certain icons. I think it gets mixed up with bullet points on certain ones, so just be aware of that.

Also keep in mind that these icons won’t show up if that computer doesn’t have these fonts installed. So carry around the fonts file to install so you are prepared when you give a presentation to your boss at your yearly review.¬†However, if you are saving these as images or pdfs, you don’t have to worry since they will no longer be rendered as fonts anymore. This makes it great for making ebooks and adding the icons to your Photoshop projects.

Overall, these icons can be used in several different places. Whether you include them in your dev projects or in some of the documents described above, they can add helpful visuals for the end user. Let me know if you find these to be useful in your projects or if you’ve found other great places for these icons!

2 thoughts on “Using Font Awesome Icons as a Font

  1. Jojie

    A lot of websites are paraphrasing the Devs “Getting started” page when writing about these icons. Thanks for actually giving new information!
    Definitely would have walked into a presentation without the icon pack.

Leave a Reply