Twitter Bootstrap Icon tutorial and applications

I have already posted an article on topic about : A starter Guide to Twitter Bootstrap.In there I have discussed the set up of Bootstrap and some elementary basic tutorial. But , I am going to share details about Twitter Bootstrap icon.

Bootstrap icon


Bootstrap icon syntax:

here is the syntax of Bootstrap icon to use in your website -

 <i class="icon_class_name"></i> 


some Bootstrap icon application :

There have lot of icon application area on Bootstrap such as Search box , user input box , Password and email Input box.

When you think a stylist search box , Bootstrap CSS and javascript are helpful to build this web application easier and faster way using the below code-

<form class="well form-search">
<input type="text" class="input-medium search-query">
<button type="submit" class="btn">
<i class="icon-search"></i></button>
</form>


Bootstrap search box


Second icon application using Bootstrap CSS base is Input box with user icon image-

<button type="submit" class="btn">
<i class="icon-search"></i></button>
<input type="text" class="input-medium">


Bootstrap input box with icon


Conclusion

I have apply bootstrap CSS in two general website elementary application.This will help to build these application easier and faster way with respect to the general HTML and CSS design.
Previous
Next Post »