image
Tips&Tricks

Font Awesome – Adding icons into your website design is now easier than ever

by Lesley Haught
December 06, 2013
Rating:
1 Star2 Stars3 Stars4 Stars5 Stars

I presume, you know that almost all website elements are images which are sliced and integrated into a website during coding. Website icons are not the exception.

I’ve been working as a designer for more than 8 years, and I have tremendous experience creating icons for personal designs. Honestly, I know that editing icons is not as easy as it might seem.…

I want to introduce a new way of working with icons for your designs. It is widely used by many web developers: it’s FontAwesome.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Here is a vivid sample of how you can work with these icons in design.

 
How to install.

First of all, you have to download font and install it like other fonts into your windows. http://fortawesome.github.io/Font-Awesome/

 
How to add icons into a design.

I’m working on a web template for ThemeForest and on this template I’ll show you how you can add icons into your design in Photoshop.

 
NOTE!!! BEFORE DOING ALL THESE STEPS YOU MUST HAVE FONTS INSTALLED ON YOUR SYSTEM.

 
Step 1. Open your design in Photoshop where you want to add icons.

 
In my case, I need to put icon into “Reviews” section, on the template near the “Date” August 11,2013.

 
Step 2. Go to this link http://fortawesome.github.io/Font-Awesome/cheatsheet/ and copy an icon from the list. Just select some icon and push (Ctrl+C).

 
Step 3. Come Back to our design in Photoshop and select the “Horizontal Type Tool” on the Toolbar or just click “T”

 
Step 4. After that, you have to find “FontAwesome” from the list of your fonts.

 
Step 5. And, click on some free space on your design and paste your icon, just push “Ctrl+V”

 
Now! You can add icons into your design easily and without any images. Your website will be loading a little faster and looks much interesting.

Enjoy!

Related Posts by Category “Tips&Tricks”

Add a Comment

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>