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 .
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.
Use them in buttons, button groups for a toolbar, navigation, or prepended form inputs.
<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>
<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>
<a class="btn btn-small" href="#"><span class="icon-star"></span></a>
<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>
<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>