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>
@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