bootstrap Glyphicons
CssTwitter BootstrapCss Problem Overview
Bootstrap css uses the halflings from Glyphicons. If I purchased their full product line, how would I incorporate that into the bootstrap framework?
Css Solutions
Solution 1 - Css
Use this CSS sprite generator, uploading the zip file. It will create the relevant CSS classes for you (names are taken from images itself), merging all images in one (transparent) PNG one.
Solution 2 - Css
You could also use the Font Awesome solution.
> Scalable vector graphics means icons look awesome at any size. > > Designed from scratch to be fully backwards compatible with Twitter Bootstrap 2.0.
Solution 3 - Css
You would have to recalculate the background positioning of every glyph icon into your own class or overwrite the classes already set by the bootstrap in order to work them in. Twitter's bootstrap uses the halfling (free) version of the icons which are 14px all around, the full set is double the size so the old background-position's
won't work.
Here is an example of what one of the bootstraps icon classes looks like:
/* class for the icon "fast-backward", notice the positioning values set in pixels */
.icon-fast-backward {
background-position: -216px -72px;
}
/* main class, defining what icon sheet to use */
[class^="icon-"], [class*=" icon-"] {
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
display: inline-block;
height: 14px;
line-height: 14px;
vertical-align: text-top;
width: 14px;
}
Solution 4 - Css
I have also created one on Github. Didn't see Marco's post above until after.
Solution 5 - Css
From what I recall, Glyphicons doesn't provide their icons as a sprite version (many icons as one image), instead you get each icon separately. If you only plan on using a couple of their icons, this should be ok.
The best way would be to create a separate css file and continue on with their ".icon-" naming convention.
.icon-whatever {
background:url('..img/someicon.png') 0 0;
}
The default background position is 14px 14px
so you need to reset it to 0 0
like I did above.
Solution 6 - Css
I've created a sprite and CSS drop-in for Bootstrap to provide this functionality. The repo and instructions are on Github. Not every icon has coverage yet, and some are still slightly off-center. To use the bigger icons just add the icon-large
CSS class:
<i class="icon-large icon-search"></i>
Solution 7 - Css
There is a great article about Bootstrap Icons here: http://www.themplio.com/twitter-bootstrap-icons
Solution 8 - Css
No need to incorporate it. You can just add the glyphicons and use it alongside with the halflings bootstrap comes with.
Add the glyphicons (regular set) as follows:
/css/glyphicons.css
/fonts/glyphicons-regular.eot
/fonts/glyphicons-regular.svg
/fonts/glyphicons-regular.ttf
/fonts/glyphicons-regular.woff
/fonts/glyphicons-regular.woff2
You propably should give the base-css-class: .glyphicons
the same style as bootstraps .glyphicon
.glyphicons {
position:relative;
top:2px;
display:inline-block;
font-family:'Glyphicons Regular';
font-style:normal;
font-weight:normal;
line-height:1;
vertical-align:top;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale
}
Next, add the reference to the glyphicons into your page as follows:
<link href="/css/glyphicons.css" rel="stylesheet" />
Now, use the complete 'regular' glyphicons alongside with the halflings:
<!-- halflings / bootstrap 3 -->
<span class="glyphicon glyphicon-glass"></span>
<!-- Glyphicons Regular set (note the plural suffix!) -->
<span class="glyphicons glyphicons-glass"></span>
The other answers are fine but keep in mind the difference between icons with the font-technique and the older technique when using sprite-png's. Png's are not always scaleable and therefore comes with several sizes. Also, the color can not be set. To contrast with the background, the .white
class can be used on png's to switch from black to white. By using fonts, style the icons as you would style a font:
.iconstyle { color: blue; font-size: 26px; etc.. }
Solution 9 - Css
You could use my soluce. Put this line after bootstrap link url css on your header.
<link href="../assets/css/bootstrap.css" rel="stylesheet">
<link href="../assets/css/opa-icons.css" rel="stylesheet">
Then to call online html code
<i class="icon-close icon-red"></i> Someting <!-- 16x16pix size color red -->
<i class="icon32 icon-close icon-blue"></i> Someting <!-- 32x32pix size color red -->
You could download here the assets (images-icons png and css both in zip) :
<http://www.photonautes-associes.fr/utils/assets.zip> enjoy :)
Solution 10 - Css
Download fonts from official bootstrap page and then paste this code as is in your CSS file
Try This code
@font-face{
font-family: 'Glyphicons Halflings';
src: url('/fonts/glyphicons-halflings-regular.eot');}
Solution 11 - Css
I thought I'd add my experience to the list here.
There were several obstacles for me when trying to add Glyphicons All to my existing, labyrinthine, Bootstrap-riddled codebase. (Among them, Glyphicons All uses the construction ".glyphicons .glyphicons-[name]" and Bootstrap uses the construction ".glyphicon .glyphicon-[name]").
I ultimately decided to just use them both, in parallel. Going forward, I find I'm using the Glyphicons All construction more and more, but the Bootstrap construction still works for all of my existing code.
Yes, including both "fonts" adds to the overall page weight, but not disastrously.
Solution 12 - Css
What I did was pretty simple and worked perfectly. NOTE: this is if you want those beautiful glyphicons working as fonts, as the bootstrap version I'm using does.
-
In the glyphicons zip, copy all the fonts in /glyphicons/web/bootstrap_example/fonts to where your bootstrap fonts are currently in your project
-
In the glyphicons zip, look at /web/bootstrap_example/css/glyphicons.css, copy and paste all into your own less/css file.
-
This step may be unnecessary as long as your own css/less file overwrites them properly: In your project's bootstrap.css file, remove @font-face stuff, .glyphicon styles, and all the glyphicon individual content tags (i.e, .glyphicon-xxxx:before { content: ... }).
-
In your less/css file with all the new tags, do a find and replace ".glyphicons-" replace with ".glyphicon-"
That should be it, unless I'm forgetting something simple. Works great for me.
Solution 13 - Css
Use glyphicons classess, example:
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
My favourite icon fonts is Fontello, you can download icons you need instead of whole package.