Error
  • JUser: :_load: Unable to load user with ID: 42
You are here:ShortcodesTemplate Icons

Template Icons

Written by 
Published in Shortcodes

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 .

  • 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.

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>
Read 5759 times Last modified on Friday, 05 July 2013 23:57
Rate this item
(0 votes)

Aliquam erat volutpat. Proin euismod laoreet feugiat. In pharetra nulla ut ipsum sodales non tempus quam condimentum. Duis consequat sollicitudin sapien, sit amet ultricies est elementum ac. Aliquam erat volutpat. Phasellus in mollis augue.

Website: www.youjoomla.com

About us

Malawi Broadcasting Corporation is a public broadcaster mandated and formed by Government under an Act of Parliament in 1964, to enhance the successful implementation of all its social and economic programs...

Social Media

Catch us on these social networks for more information

Facebook Twitter RSS

Get Your Newsletter