Font Awesome Really is Awesome!

If you are looking to create social icons, FontAwesome is a font and CSS framework that is super easy to use and apply CSS styles and pseudo classes like ‘hover’ on.

Here’s what you do:

1. Download Font Kit

Go to http://fortawesome.github.io/Font-Awesome/ and download FontAwesome’s font kit.

image

2. Move Fonts and CSS Folders

Drag fonts and CSS folder from the downloaded font kit into your project folder.

image

3. Link to the FontAwesome CSS

In the head of your HTML , link to the FontAwesome minified CSS file .

image

4. Select an Icon

Find the icon you want here http://fortawesome.github.io/Font-Awesome/icons/, click on it and copy the html into your file where you want the icon to appear.

image

5.  Call the Icon in your CSS

Call it in your CSS using the i tag to define the font-size and color.

image

6. Stylize the Hover

Add the hover pseudo element and apply your hover styles.

image Posted on: May 24, 2014 3:40 pm