We added Font Awesome icons to our Twitter Bootstrap installation. Though Glyphicons provided amazing icons, they still need to load a CSS sprite with those 160 images. How would if be if you could add an icon font to display those icons and then scale them to any size just like fonts, while maintaining the sharpness and clarity of the icons.
Font Awesome for Bootstrap
Font Awesome promises to do just that and is an iconic font designed specifically for Bootstrap. It displays scalable vector icons that can be easily customized to any size, color, shadow, transition – just as a font can do. The possibilities are endless.
Easy Code – The way to insert icons is also the same as for Glyphicons with an i code. Its is simply the easiest way to insert icons as you juts need to know the icon class from the huge list on their site and its done in seconds.
In addition you can have more fun with stackable icons (one icon superimposed over the other!), rotating and flipped icons (just by adding CSS class!), icon lists etc. and all with a simple CSS class addition, changes which seem semantically valid too. Its is indeed the best way to add icons to any site.
For example this simple code will insert a huge flag, 3 times the font size and align it left.
<i class="icon-flag icon-3x pull-left"></i>
No Images – Have a look at all the icons – large and small, across our site – they are all powered by Font Awesome. Did you notice the cool Social icons on the top – see the screenshot
… though they seem too large to be icons, believe me they are a font and have no images as CSS background! And this seems even better than pure CSS social buttons.
Again you can add as many icons as you want, as once the font file loads, you can add icons of any size or color anywhere in your web design.
Easy Font Awesome Installation
As we continue to develop with Twitter Bootstrap, exciting new features are coming forth. Again we find that BootstrapCDN provides full CDN support for Font Awesome. This means its just a cut and paste of code, to replace some Bootstrap CSS.
BootstrapCDN provides CSS files without icons. So you can add the ‘Complete Bootstrap CSS Without Glyphicons Icons’. This file also combines the Bootstrap CSS with the Responsive CSS, so you get only one CSS file! Then add the Font Awesome CSS file and you are done. You do not need to mess with the Bootstrap JS files. They have an IE7 compatibility support CSS file also but this is optional.
Which means you just need to add these CSS files, and remove the older Bootstrap CSS files (you have Bootstrap javascripts already installed)
<link href="http://www.quickonlinetips.com//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"> <link href="http://www.quickonlinetips.com//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
So get Font Awesome and power up Twitter Bootstrap even further.
Original article: How to Add Font Awesome Icons in Bootstrap
©2013 QuickOnlineTips (QOT). All Rights Reserved.
QOT is now powered by Twitter Bootstrap, a powerful front-end framework for powerful web design, and speedier web development. Bootstrap is made by Twitter to do some cool stuff with your website. You need to try out Bootstrap to see why so many websites are switching over to it.
Just add a few lines of CSS, JavaScript code, upload few files on your server – Bootstrap lets you take your site to new levels of interactivity and design, Get the design elements for your website, which you observed in awe on some top websites till now. Bootstrap will let you get the same features for your website in minutes.
It is powered by LESS CSS, is compiled via Node, and is actively developed by dedicated Github developer community. Don’t let the technical stuff confuse you as it is easy to implement by any webmaster quickly. Over the past few days, we also tweaked our site design to incorporate the power of Bootstrap.
Setup in Minutes
You just need to add 2 CSS files – bootstrap CSS and another responsive design CSS file (which they are merging in the next version 3.0). Then you need to add jQuery scripts and Bootstrap JS. The site provides excellent tutorials to get beautiful design elements and get superior responsive design with as many as 12 grid columns! Using a custom CSS file, you can tweak your site design further. You can also download a custom Bootstrap CSS after selecting values for key CSS selectors. The amazing flexibility and support for modern standards is great.
CDN support
Its a good idea to host jQuery from Google libraries to get excellent speed.
<script src="http://www.quickonlinetips.com//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
You can download and host the other bootstrap CSS/JS scripts from your CDN for faster delivery or get them hosted at BoostrapCDN for free. This makes the code just cut and paste to your website. These are minimized javascript and CSS files for smaller size and faster loading.
<link href="http://www.quickonlinetips.com//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"> <script src="http://www.quickonlinetips.com//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
Power of jQuery
Its not only about how quickly you can add beautiful buttons, forms, or other CSS3 effects which you can see on our site – its also about the power of jQuery plugins like Collapsible menus (see our comments), pop out modals, dropdown menus (see our navigation), roll over navigation, carousels, affixing nav menu to top/bottom of screen and much more.
Sharp Icons
Another amazing feature is Glyphicons - they have a tie up to host a CSS sprite image of Glyphicon halflings (a paid icon collection, available for free in Bootstrap) – this allows you to insert 160 icons any where in your document, with a simple line of code, without any messy CSS codes and CSS sprite creation.
This code inserts a star wherever you want.
<i class="icon-star"></i>
Since the image loads once, you can insert one or all the 160 icons on every page if you like, without slowing the site! Why does our site have so many icons everywhere – you know why.
As Bootstrap is getting popular – there are hundred of free Bootstrap Themes available, and many developers are combining the HTML5 designs with Bootstrap to create exceptional websites. Download Bootstrap today.
Update: You can use Font Awesome and get a more superior icon experience for your site.
Original article: Use Twitter Bootstrap for Powerful Web Design
©2013 QuickOnlineTips (QOT). All Rights Reserved.
.png "Www.BestTheme.Net")
Posts
No comments:
Post a Comment