Monday, 30 September 2013

Icon Fonts in Genesis - Child Theme

how to add icon fonts in genesis child theme - font awesome
Icon fonts in Genesis Framework - Child Theme - Font Awesome

Icon fonts are great in now a days web design and development. a lot of new theme and css frameworks are coming with great features and much more easy to design and develop a new website or theme from scratch.

I believe icons speak what words can not and that is why I always use them in my theme instead of adding content every where we should add icons to make our design look elegant.

today I would like to introduce you with new icons which are called as Icon Fonts

what icon fonts are ?

icon fonts are like fonts which can be used in our themes and designs in the same way as fonts. they can be well resized, apply css properties to design apply shadows, colors, and other effects from photoshop or css, css3

the best thing i love in icon fonts is they can be well resized without loosing their resolution and we can simple have hover effects and other animations that are not possible with image icons.

so lets take start to add them in our new child theme which  I am creating for one of my client. "Rich One Day"

icon fonts we are going to use are "Font Awesome"

go to the above link and download the package

Extract the files and copy css & font folder into the root of your child theme

the theme folder should look like the below image. also remove the other css files that we don not need only keep on css file font-awesome.css

Now open font-awesome.css and change the url of the font files. in this examle I will add "../" to navigate one folder backward and then font/fontfilename. if you change folder or folder name then you should change the url, otherwise it will not work.

navigation in font-awesome.css file

Now add below line at the top of your theme style.css (after theme information and comments */) and everything is setup.
@import url('css/font-awesome.css');

To add icons place <i class="icon-name"></i>

<i class="icon-home"></i>

see cheatsheet for all font awesome icons here Font Awesome Cheatsheet

Please share your valuable information in comments.

No comments:

Post a Comment