Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@andyj

andyj/glyphicon_example.html

Created September 26, 2013 23:38
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save andyj/6722140 to your computer and use it in GitHub Desktop.
Save andyj/6722140 to your computer and use it in GitHub Desktop.
Download ZIP
If you use Bootswatch files from the bootstrap CDN then to get the Glyphicons working you need to include glphicons css file @ http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css
Raw
glyphicon_example.html
<html>
<head>
<link href="//netdna.bootstrapcdn.com/bootswatch/3.0.0/flatly/bootstrap.min.css" rel="stylesheet">
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
</head>
<body>
<span class="alert alert-danger">Glyphicon example</span>
<hr>
<div class="the-icons">
<span class="glyphicon glyphicon-glass"></span>
<span class="glyphicon glyphicon-music"></span>
<span class="glyphicon glyphicon-search"></span>
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-heart"></span>
<span class="glyphicon glyphicon-star"></span>
<span class="glyphicon glyphicon-star-empty"></span>
<span class="glyphicon glyphicon-user"></span>
<span class="glyphicon glyphicon-film"></span>
<span class="glyphicon glyphicon-th-large"></span>
<span class="glyphicon glyphicon-th"></span>
<span class="glyphicon glyphicon-th-list"></span>
<span class="glyphicon glyphicon-ok"></span>
<span class="glyphicon glyphicon-remove"></span>
<span class="glyphicon glyphicon-zoom-in"></span>
<span class="glyphicon glyphicon-zoom-out"></span>
<span class="glyphicon glyphicon-off"></span>
<span class="glyphicon glyphicon-signal"></span>
<span class="glyphicon glyphicon-cog"></span>
<span class="glyphicon glyphicon-trash"></span>
<span class="glyphicon glyphicon-home"></span>
<span class="glyphicon glyphicon-file"></span>
<span class="glyphicon glyphicon-time"></span>
<span class="glyphicon glyphicon-road"></span>
<span class="glyphicon glyphicon-download-alt"></span>
<span class="glyphicon glyphicon-download"></span>
<span class="glyphicon glyphicon-upload"></span>
<span class="glyphicon glyphicon-inbox"></span>
<span class="glyphicon glyphicon-play-circle"></span>
<span class="glyphicon glyphicon-repeat"></span>
<span class="glyphicon glyphicon-refresh"></span>
<span class="glyphicon glyphicon-list-alt"></span>
<span class="glyphicon glyphicon-lock"></span>
<span class="glyphicon glyphicon-flag"></span>
<span class="glyphicon glyphicon-headphones"></span>
<span class="glyphicon glyphicon-volume-off"></span>
<span class="glyphicon glyphicon-volume-down"></span>
<span class="glyphicon glyphicon-volume-up"></span>
<span class="glyphicon glyphicon-qrcode"></span>
<span class="glyphicon glyphicon-barcode"></span>
<span class="glyphicon glyphicon-tag"></span>
<span class="glyphicon glyphicon-tags"></span>
<span class="glyphicon glyphicon-book"></span>
<span class="glyphicon glyphicon-bookmark"></span>
<span class="glyphicon glyphicon-print"></span>
<span class="glyphicon glyphicon-camera"></span>
<span class="glyphicon glyphicon-font"></span>
<span class="glyphicon glyphicon-bold"></span>
<span class="glyphicon glyphicon-italic"></span>
<span class="glyphicon glyphicon-text-height"></span>
<span class="glyphicon glyphicon-text-width"></span>
<span class="glyphicon glyphicon-align-left"></span>
<span class="glyphicon glyphicon-align-center"></span>
<span class="glyphicon glyphicon-align-right"></span>
<span class="glyphicon glyphicon-align-justify"></span>
<span class="glyphicon glyphicon-list"></span>
<span class="glyphicon glyphicon-indent-left"></span>
<span class="glyphicon glyphicon-indent-right"></span>
<span class="glyphicon glyphicon-facetime-video"></span>
<span class="glyphicon glyphicon-picture"></span>
<span class="glyphicon glyphicon-pencil"></span>
<span class="glyphicon glyphicon-map-marker"></span>
<span class="glyphicon glyphicon-adjust"></span>
<span class="glyphicon glyphicon-tint"></span>
<span class="glyphicon glyphicon-edit"></span>
<span class="glyphicon glyphicon-share"></span>
<span class="glyphicon glyphicon-check"></span>
<span class="glyphicon glyphicon-move"></span>
<span class="glyphicon glyphicon-step-backward"></span>
<span class="glyphicon glyphicon-fast-backward"></span>
<span class="glyphicon glyphicon-backward"></span>
<span class="glyphicon glyphicon-play"></span>
<span class="glyphicon glyphicon-pause"></span>
<span class="glyphicon glyphicon-stop"></span>
<span class="glyphicon glyphicon-forward"></span>
<span class="glyphicon glyphicon-fast-forward"></span>
<span class="glyphicon glyphicon-step-forward"></span>
<span class="glyphicon glyphicon-eject"></span>
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="glyphicon glyphicon-plus-sign"></span>
<span class="glyphicon glyphicon-minus-sign"></span>
<span class="glyphicon glyphicon-remove-sign"></span>
<span class="glyphicon glyphicon-ok-sign"></span>
<span class="glyphicon glyphicon-question-sign"></span>
<span class="glyphicon glyphicon-info-sign"></span>
<span class="glyphicon glyphicon-screenshot"></span>
<span class="glyphicon glyphicon-remove-circle"></span>
<span class="glyphicon glyphicon-ok-circle"></span>
<span class="glyphicon glyphicon-ban-circle"></span>
<span class="glyphicon glyphicon-arrow-left"></span>
<span class="glyphicon glyphicon-arrow-right"></span>
<span class="glyphicon glyphicon-arrow-up"></span>
<span class="glyphicon glyphicon-arrow-down"></span>
<span class="glyphicon glyphicon-share-alt"></span>
<span class="glyphicon glyphicon-resize-full"></span>
<span class="glyphicon glyphicon-resize-small"></span>
<span class="glyphicon glyphicon-plus"></span>
<span class="glyphicon glyphicon-minus"></span>
<span class="glyphicon glyphicon-asterisk"></span>
<span class="glyphicon glyphicon-exclamation-sign"></span>
<span class="glyphicon glyphicon-gift"></span>
<span class="glyphicon glyphicon-leaf"></span>
<span class="glyphicon glyphicon-fire"></span>
<span class="glyphicon glyphicon-eye-open"></span>
<span class="glyphicon glyphicon-eye-close"></span>
<span class="glyphicon glyphicon-warning-sign"></span>
<span class="glyphicon glyphicon-plane"></span>
<span class="glyphicon glyphicon-calendar"></span>
<span class="glyphicon glyphicon-random"></span>
<span class="glyphicon glyphicon-comment"></span>
<span class="glyphicon glyphicon-magnet"></span>
<span class="glyphicon glyphicon-chevron-up"></span>
<span class="glyphicon glyphicon-chevron-down"></span>
<span class="glyphicon glyphicon-retweet"></span>
<span class="glyphicon glyphicon-shopping-cart"></span>
<span class="glyphicon glyphicon-folder-close"></span>
<span class="glyphicon glyphicon-folder-open"></span>
<span class="glyphicon glyphicon-resize-vertical"></span>
<span class="glyphicon glyphicon-resize-horizontal"></span>
<span class="glyphicon glyphicon-hdd"></span>
<span class="glyphicon glyphicon-bullhorn"></span>
<span class="glyphicon glyphicon-bell"></span>
<span class="glyphicon glyphicon-certificate"></span>
<span class="glyphicon glyphicon-thumbs-up"></span>
<span class="glyphicon glyphicon-thumbs-down"></span>
<span class="glyphicon glyphicon-hand-right"></span>
<span class="glyphicon glyphicon-hand-left"></span>
<span class="glyphicon glyphicon-hand-up"></span>
<span class="glyphicon glyphicon-hand-down"></span>
<span class="glyphicon glyphicon-circle-arrow-right"></span>
<span class="glyphicon glyphicon-circle-arrow-left"></span>
<span class="glyphicon glyphicon-circle-arrow-up"></span>
<span class="glyphicon glyphicon-circle-arrow-down"></span>
<span class="glyphicon glyphicon-globe"></span>
<span class="glyphicon glyphicon-wrench"></span>
<span class="glyphicon glyphicon-tasks"></span>
<span class="glyphicon glyphicon-filter"></span>
<span class="glyphicon glyphicon-briefcase"></span>
<span class="glyphicon glyphicon-fullscreen"></span>
<span class="glyphicon glyphicon-dashboard"></span>
<span class="glyphicon glyphicon-paperclip"></span>
<span class="glyphicon glyphicon-heart-empty"></span>
<span class="glyphicon glyphicon-link"></span>
<span class="glyphicon glyphicon-phone"></span>
<span class="glyphicon glyphicon-pushpin"></span>
<span class="glyphicon glyphicon-euro"></span>
<span class="glyphicon glyphicon-usd"></span>
<span class="glyphicon glyphicon-gbp"></span>
<span class="glyphicon glyphicon-sort"></span>
<span class="glyphicon glyphicon-sort-by-alphabet"></span>
<span class="glyphicon glyphicon-sort-by-alphabet-alt"></span>
<span class="glyphicon glyphicon-sort-by-order"></span>
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
<span class="glyphicon glyphicon-sort-by-attributes"></span>
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
<span class="glyphicon glyphicon-unchecked"></span>
<span class="glyphicon glyphicon-expand"></span>
<span class="glyphicon glyphicon-collapse"></span>
<span class="glyphicon glyphicon-collapse-top"></span>
</div>
<body>
</html>
@sravanthim
Copy link

Thanks... the css link helped me. Without the css, bootstrap.min.js is not loading glyphicons.

@alcalyn
Copy link

alcalyn commented Sep 24, 2014

Why is there the line:

a{color:#428bca;text-decoration:none;}a:hover,a:focus{color:#2a6496;text-decoration:underline;}

and other css overrides ?

For me that override the link theme color, and override also the theme font family...

BTW glyphicons work like a charm !

@TeriPastorino
Copy link

so I am new to this, exactly how do i include this to get my glyphs to work using the bootswatch theme? do i just need to include the link line? what do i need and where do i put it?

i have everything else working, i have the bootswatch and _variables file included for my theme (journal). just can't get the glyphs to display
thanks for your help

@AlexisTM
Copy link

Thanks <3

@sanjeetjmp
Copy link

Factually those lines are just to inherit the properties to be used while using Glyphicons. @alcalyn.
And yeah it is lkind of easy to use

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment