RJ Wattenhofer

Tech writing, 3D model building and game design.

March 18, 2024

How to Install and Use Glyphicons Halflings Sprite Sheets

using halflings sprite sheets to add pizzazz to your site

written by

Download Glyphicons Sprite Sheets (official unmodified standard set)
View Glyphicons CSS style sheet code

You've been hearing about the amazing capabilities of Glyphicons Halflings, but aren't sure exactly how to add them to your website and utilize them. If you are a front-end developer, it is beneficial to undertand how to implement this structure into customer builds. I'll step you through the process.

Glyphicons is a collection of small monochromatic symbols & icons recognized universally by most people which can help them to quickly & easily identify links and information on your site.

Glyphicons is based on the concept of CSS Sprites, whereas you upload one single image file containing many images (the sheet in column two has 140) and then code coordinates in the CSS file, rather than uploading multiple images to perform the same task.

If you do not have the Glyphicons white and black halflings sprite sheets, you can download them from the link above (notice the download icon next to the link text is a sample from Glyphicons) or from the Twitter Bootstrap Project on GitHub, which includes the CSS style sheet with the necessary Glyphicons code. You can also download free individual Glyphicons directly from Glyphicons.com.

First, pull up the bootstrap.min.css file (or whichever CSS file your Glyphicons code is located) and look for the chunk of following code about three-quarters of the way down the page:

 
<style>
...[class*=" icon-"]{background-image:url("http://www.rjwattenhofer.com/img/glyphicons-halflings.png")}
.icon-glass{background-position:0 0}.icon-music{background-position:-24px 0}
.icon-search{background-position:-48px 0}.icon-envelope{background-position:-72px 0}
.icon-heart{background-position:-96px 0}.icon-star{background-position:-120px 0}
.icon-open-star{background-position:-144px 0}.icon-user{background-position:-168px 0}
.icon-film{background-position:-192px 0}...
</style>

The URL on the first line is the location/path of the black halflings sprite sheet. There is also a path in the CSS file for the white sheet. Make sure the file paths are leading correctly to the folder where you uploaded the black and white sheets.

The second line begins the sprite coordinates. ".icon-glass" corresponds directly with the first image on your sprite sheet (the black martini glass). ".icon-music" matches up with the black music note right next to it on line one of the sheet, and so forth.

The "background-position" tells us the exact location of your icon: The halfway point between the martini glass and the music note is 24px, so the code for ".icon-glass" is "background-position:-24px". Everything in that area (i.e. the martini glass) will be displayed. All of your icons are matched up to the code which moves left to right across the sprite sheet.

Now we need to embed the icon on our webpage. Here's how:

 
<a href="http://rjwattenhofer.com/projects/film/">film <i class="icon-film"></i></a>

RESULT: film

I used the halfling film icon as an example. The halfling sheets come in both black and white: In the above example I used a black icon, as specified by the code "icon-film". If you want to use a white icon add "icon-white", as in "icon-film icon-white".

If you decide to customize your own sprite sheets, you can name your individual sprite images anything you want (e.g. .icon-snoopy, .icon-starbucks), as long as both the i class and the name on the CSS file match. The one caveat is that all icons must begin with the prefix .icon- or they will not function properly.

And that's all there is to it. I hope you enjoyed learning more about Glyphicons Halflings and can apply the knowledge successfully. Now go have fun!

~ RJ Wattenhofer, April 9, 2013

Glyphicons halflings sprite sheet
bikini atoll 1946 cylidrome arena smart trivia game Cheap Silkroad R Sale Online, Fast And Safe, 24*7 online statis game statis game 02 country tales country tales 02 verdun game verdun game 02 ninja slayer action figure ninja slayer action figure
  • xing social button
  • linkedin social button
  • buffer social button
  • reddit social button
  • stumbleupon social button
  • facebook social button
  • google plus button
  • twitter social button
  • renren social button Renren
  • vkontakte social button Share in VK