I am Nithin Chandra,Web Designer and Dotnetnuke(DNN) skin developer based in Bangalore, India - Website Design & Development,Responsive Website Design,Email Marketing,Search engine optimization(SEO),Social Media Marketing,Website Hosting,Website Performance Analysis,Blog Design & Development,Content Management System Integration,Mobile Website Design. Visit my Portfolio to know me more www.nithinchandrasr.com
Tuesday, January 21, 2014
Integrate Font Awesome 4.0 with Twitter Bootstrap 3.0
Hi, In this blog I will explain How to Integrate Font Awesome 4.0 with Twitter Bootstrap3.0.
Here is the video How to Integrate Font Awesome with Twitter Bootstrap3.0
Firstly, What is Font Awesome?
Font Awesome gives you scalable vector icons that can instantly be customized to any size, color, drop shadow, and anything that can be done with the power of CSS.
Features of Font Awesome:
One Font, 369 Icons
In a single collection, Font Awesome is a photographic language of web-related actions.
Perfect on Retina Displays
Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.
Easily style icon color, size, shadow, and anything that's possible with CSS.
Scalable vector graphics means every icon looks awesome at any size.
Made for Bootstrap
Designed from scratch to be fully compatible with Bootstrap 3.0.0.
So How do we integrate Font Awesome with Twitter Bootstrap 3.0
Step1: Will download pre compiled Font Awesome 4.0 files from Font Awesome website(http://fontawesome.io/). Click on Download button.
font-awesome-4.0.3.zip folder will be downloaded on your local system. Cut the files from downloads folder and paste it to your Website/resources folder.
Will Click on Download Bootstrap button. Pre compiled Bootstrap zipped files(bootstrap-3.0.3-dist.zip) will be downloaded on your system.
Extract Bootstrap files from bootstrap zip folder and copy the folders present in dist folder which usually has css,js and fonts folder.Copy css,js and fonts folder to new folder called Portfolio(Where we will integrate bootstrap and font awesome) in Website folder
Similarly extract font awesome files present in resources folder and navigate toC:\Users\nithin.chandra\Desktop\Website\resources\font-awesome-4.0.3\font-awesome-4.0.3\css
We will copy Font awesome css files to our Portfolio css folder. And Similary we will copy Font Awesome Fonts folder to Portfolio fonts folder.Once folders have been copied to our portfolio folder. And all folder structure has been done as instructed will create HTML5 document using dreamweaver.
Once HTML5 document created.We will link Bootstrap css files and font awesome css links.
Thats it once the files have been link up to html5 document will start using font awesome icons.Navigate to Examples page in Font Awesome website - http://fontawesome.io/examples/
Start copying which ever icon you needed and copy the related code to that icon and paste it to html5 document we created. And preview the html document in browser to see the fonts in action.