Take advantage of your new template that comes with 361 font icons by Font Awesome and additional 16 YJSG Icons created by wounderful Icons tool from Icomoon .
Web Application Icons
Currency Icons
Text Editor Icons
Directional Icons
Video Player Icons
Brand Icons
- All brand icons are trademarks of their respective owners.
- The use of these trademarks does not indicate endorsement of the trademark holder by Font Awesome, nor vice versa.
Medical Icons
YJSG Icons
How to use
Add any of the class names from above to your <span> element. Bootstrap coders suggest <i> element, but semantically correct markup
should be <span>. It is up to you to decide. To use, place the following code just about anywhere:
<span class="icon-search"></span>
There are also styles available for inverted (white) icons, made ready with one extra class. We will specifically enforce this class on hover and active states for nav and dropdown links.
<span class="icon-search icon-white"></span>
Heads up! When using beside strings of text, as in buttons or nav links, be sure to leave a space after the <i> tag for proper spacing.
Icon examples
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
Buttons
Button group in a button toolbar
<div class="btn-toolbar"> <div class="btn-group"> <a class="btn" href="#"><span class="icon-align-left"></span></a> <a class="btn" href="#"><span class="icon-align-center"></span></a> <a class="btn" href="#"><span class="icon-align-right"></span></a> <a class="btn" href="#"><span class="icon-align-justify"></span></a> </div> </div>
Dropdown in a button group
<div class="btn-group"> <a class="btn btn-primary" href="#"><span class="icon-user icon-white"></span> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#"><span class="icon-pencil"></span> Edit</a></li> <li><a href="#"><span class="icon-trash"></span> Delete</a></li> <li><a href="#"><span class="icon-ban-circle"></span> Ban</a></li> <lspan class="divider"></li> <li><a href="#"><span class="i"></span> Make admin</a></li> </ul> </div>
Small button
<a class="btn btn-small" href="#"><span class="icon-star"></span></a>
Navigation
<ul class="nav nav-list"> <lspan class="active"><a href="#"><span class="icon-home icon-white"></span> Home</a></li> <li><a href="#"><span class="icon-book"></span> Library</a></li> <li><a href="#"><span class="icon-pencil"></span> Applications</a></li> <li><a href="#"><span class="i"></span> Misc</a></li> </ul>
Form fields
<div class="control-group"> <label class="control-label" for="inputIcon">Email address</label> <div class="controls"> <div class="input-prepend"> <span class="add-on"><span class="icon-envelope"></span></span> <input class="span2" id="inputIcon" type="text"> </div> </div> </div>
