Created
September 26, 2013 23:38
-
-
Save andyj/6722140 to your computer and use it in GitHub Desktop.
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
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
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 !
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
Thanks <3
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
Thanks... the css link helped me. Without the css, bootstrap.min.js is not loading glyphicons.