How to use glyphicons in bootstrap 3.0

More than just "Fast answer"

From "icon-" to "glyphicon"

Gone are the days of using the "icon-" prefix in Bootstrap. With the advent of Bootstrap 3.0, we now use <i> or <span> tags along with the glyphicon class. Beware, old habits die hard, so:

<!-- Old times -->
<i class="icon-search"></i>

<!-- Cool kids use 'glyphicon' now -->
<span class="glyphicon glyphicon-search"></span>


And while both <i> and <span> seem pretty compatible, <span> tends to make the web a tad friendlier to screen readers.

All about right file paths

In case you're playing "hide-and-seek" with the glyphicons, make sure your "fonts" folder is hanging out in the same directory with your "css" and "js" buddies:

@icon-font-path: "/fonts/"; // "Hey CSS, find the fonts here!"


Remember to adjust the paths properly, or else you risk getting lost in the "directory woods".

Smoothening migration bumps

Going Bootstrap 3.0 somehow feels like changing schools, doesn't it? Luckily, there are tools to help migrate your old code. The Bootstrap 3 migration guide is your new best friend.

Handling "icon + button" relationships

Think of icons and buttons as peas and pods, but with a subtle 5px space to breathe:

button span.glyphicon {
  margin-right: 5px; // "Ah! Roomier than a SpaceX capsule"
}


Digging deeper

Deploying glyphicons

You can use these cool Technician show-offs in:

• Navigation menus: where glyphicons serve as silent road signs
• Forms and inputs: where they act as traffic cops while filling out data
• Alerts and notifications: where they play loudspeaker roles to announce important stuff

Avoid these potholes

• Overstuffing icons: Too many stars can dim the sky
• Misfit icons: Icons should asset the design language, not destabilize it

Exploiting glyphicons

• Color and Size customization: The glyphicons are css-friendly. So feel free to appoint any color and size.
• Spin Animations: A spinning icon is a subtle attention-grabber. Use it to your advantage.

When glyphicons don't hit the mark

• SVG Icons: For a smoother scalability, and more manipulation controls, switch to SVGs.
• Font Awesome: An alternative to Bootstrap's glyphicons, equally easy to implement in Bootstrap 3.