bootstrap Glyphicons

Question

Bootstrap css uses the halflings from Glyphicons . If I purchased their full product line, how would I incorporate that into the bootstrap framework?

Answer 1

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.

Answer 2

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.

Answer 3

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;
} 

Answer 4

I have also created one on Github. Didn't see Marco's post above until after.

https://github.com/ekryski/bootstrap-template

Answer 5

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.

Answer 6

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>

Answer 7

这里有一篇很棒的关于Bootstrap Icons的文章： http ： //www.themplio.com/twitter-bootstrap-icons

Answer 8

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.. }

Answer 9

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>&nbsp;Someting <!-- 16x16pix size color red -->
<i class="icon32 icon-close icon-blue"></i>&nbsp;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 :)

Answer 10

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');}

Answer 11

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.

Answer 12

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.

1. In the glyphicons zip, copy all the fonts in /glyphicons/web/bootstrap_example/fonts to where your bootstrap fonts are currently in your project

2. In the glyphicons zip, look at /web/bootstrap_example/css/glyphicons.css, copy and paste all into your own less/css file.

3. 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 (ie, .glyphicon-xxxx:before { content: ... }).

4. 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.

Answer 13

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.