 |
| 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
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.
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