How to Use Bootstrap 3 Glyphicons
Glyphicons are great! They're one of my favourite additions to native Bootstrap 3. I've been working with these glyphs quite a lot, so I thought I'd make a cheat sheet for myself.
Cheat sheet?
Yeah! To use this cheat sheet, simply find the glyphicon you want to use and click the copy button. This will add the complete HTML code for that glyphicon (span tag and all) to your clipboard, ready to paste into your web development tool of choice.
What are Glyphicons?
Glyphicons are basically little symbols, icons, or pictograms (whatever you prefer to call them) that you can use in a webpage. They're implemented in Bootstrap as an icon font — a custom font that contains these glyphs instead of letters.
If you're creating a site based on Bootstrap 3.3.7, you already have access to all 260 glyphs in the Glyphicons 1.9 set.
Don't know how to set up Bootstrap? Go check out the officalgetting started guide, or simply just include these two lines in your<head> tag:
(Bootstrap hosting very kindly provided bybootstrapcdn.com)
Counterpoint
Icon fonts aren't the only way to implement icons on the web. If you're looking for a explanation of using icon fonts vs. SVG files (another possible method), I'd suggest reading this excellent post by Ian Feather:Ten reasons we switched from an icon font to SVG.
Who made them?
The glyphicons you see in Bootstrap are part of a set calledGlyphicons Halflings and were created by the very talented Jan Kovařík over atGLYPHICONS.
Am I allowed to use them?
Short answer: absolutely! Jan has kindly released them under thesame MIT license as Bootstrap. If you'd like more detail, please check outJan's licensing page.
How do they work?
So, how do I add an icon to my webpage? Well, Glyphicons can be used on the web in one of three ways.
You can use a simple<span> tag to place an glyphicon in your page, like this:
<span class="glyphiconglyphicon-home"></span> =
- The first class—glyphicon—is a base class. It tells the
<span>tag, "hey, heads up: this is going to be an icon." - The second class (in this example,glyphicon-home) points thespecific icon you want to use. This one is an icon of a house!
To use a HTML Tag for an icon, simply copy and paste<i class="glyphiconglyphicon-home"></i> anywhere within the<body> of your page.
Icon classes shouldn't be combined with other elements in Bootstrap. They're designed to be standalone.
This works slightly differently, by:
- Specifying the Glyphicon web-font in a CSS rule with
font-family - Using the Unicode HTML Entity to display the icon
Firstly, the CSS rule. This should be placed inside a<style> tag, or better yet, in a seperate stylesheet:
span.icon {
font-family:'Glyphicons Halflings';
}
Next, the HTML Entity part:
<span class="icon"></span>The CSS rule specifies that any Unicode HTML Entityinside a<span class="icon"></span> tag will be rendered on the page as an icon.
The HTML entity inside the tag (in this case,) is a string of characters that tells the web-font to display a certain icon.
Note: This method may offer you more flexibility (for example, you could use a<div> or<li> tag instead).
This method works by including the rendering of the icon before the content using the:before CSS psuedo-element.
Firstly, the web-font is specified withfont-family, and then the icon is specified by using thecontent property alongside a unicode hex entity (in this case,f015).
Because the hex entity is inside a style tag, it must be prepended with an escaped backslash, making it\f015.
This should be placed inside a<style> tag, or better yet, in a seperate stylesheet:
span.icon:before {
font-family:'Glyphicons Halflings';
content:"\f015";
}
To add this icon to a page, add this HTML tag anywhere in thebody of your page.
<span class="icon"></span>Note: This method is useful because it seperates the visual elements of your design—like icons—from the structural HTML, so you can add glyphicons to existing elements. Particularly useful for tasks likeWordpress orMoodle theme development, for example.
Examples
You can use glyphicons in a variety of ways; in buttons, button groups for a toolbar, navigation or prepended form inputs. Here are a few examples of glyphicons in action:
Buttons
<button type="button"class="btn btn-default btn-lg">
<span class="glyphiconglyphicon-star"></span> Star
</button>
Toolbars
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
<button type="button"class="btn btn-default">
<span class="glyphiconglyphicon-align-left"></span>
</button>
<button type="button"class="btn btn-default">
<spancode-blue">glyphiconglyphicon-align-center"></span>
</button>
<button type="button"class="btn btn-default">
<span class="glyphiconglyphicon-align-right">
</span>
</button>
<button type="button"class="btn btn-default">
<span class="glyphiconglyphicon-align-justify">
</span>
</button>
</div>
</div>
Navigation
<ul class="nav nav-pills">
<li>
<a href="index.html">
<span class="glyphiconglyphicon-home"></span> Home
</a>
</li>
<li>
<a href="shop.html">
<span class="glyphiconglyphicon-shopping-cart"></span> Shop
</a>
</li>
<li>
<a href="about.html">
<span class="glyphiconglyphicon-info-sign"></span> About
</a>
</li>
</ul>
Form Inputs
<div class="input-group input-group-lg">
<span class="input-group-addon">
<span class="glyphiconglyphicon-envelope"></span>
</span>
<input class="form-control"type="text"placeholder="Email address">
</div>
<div class="input-group input-group-lg">
<span class="input-group-addon">
<span class="glyphiconglyphicon-lock"></span>
</span>
<input class="form-control"type="password"placeholder="Password">
</div>
Additional Reading
Want more info on the Glyphicons in Bootstrap 3? Check out theofficial Bootstrap documentation.
About me
My name isJames Croft. I'm a web developer from Brisbane, Australia.
If you found this page useful, consider buyinga Bootstrap Cheat Sheet poster for your wall!