Customization Guide

• Grid system
• Buttons
• Icons
• Tables
• Widgets
• Tabs
• Other

The Glyphicons are well known of being included as the main font in Twitter Bootstrap Framework. We have included with AdminPlus 400+ High Quality Font Icons.

Using the icons

Using the icons it's pretty much simple. You just have to give to the icon's container, a class glyphicons and the specific <icon class> (you can find all of these bellow), and place in it an <i> element that will be replaced by the icon.

<a href="#" class="glyphicons glass"><i></i> glass</a>
<a href="#" class="glyphicons leaf"><i></i> leaf</a>
<a href="#" class="glyphicons dog"><i></i> dog</a>
<a href="#" class="glyphicons user"><i></i> user</a>
<a href="#" class="glyphicons girl"><i></i> girl</a>

Customizing the icons

Customizing icons features such as color & size it's also simple. Supose we have the following example that we would like to customize:

<!-- HTML Markup -->
<a href="#" class="glyphicons leaf"><i></i> leaf</a>

<!-- Result -->
leaf

Since the <i> element is the one controling the icon, one could guess that styling this element would affect the icon. Well, it wouldn't! It's actually the content :before the <i> element we have to change, by using the CSS pseudo-element :before.

<!-- Styling -->
<style type="text/css">
.glyphicons.leaf i:before {
	color: #EDB459;
}
</style>

<!-- HTML Markup -->
<a href="#" class="glyphicons leaf"><i></i> leaf</a>

<!-- Result -->
leaf