how to add additional glyphicons from glyphicons.com (png files) to bootstrap 3?

Question

I know how to use standard glyphicons, but I would like to use this additional from: http://glyphicons.com/ Direct link to the free version: http://glyphicons.com/files/glyphicons_free.zip

The structure of my bootstrap look so:

    ➜  bootstrap-3.1.1-dist  tree
    .
    ├── css
    │   ├── bootstrap-theme.css
    │   ├── bootstrap-theme.css.map
    │   ├── bootstrap-theme.min.css
    │   ├── bootstrap.css
    │   ├── bootstrap.css.map
    │   └── bootstrap.min.css
    ├── fonts
    │   ├── glyphicons-halflings-regular.eot
    │   ├── glyphicons-halflings-regular.svg
    │   ├── glyphicons-halflings-regular.ttf
    │   └── glyphicons-halflings-regular.woff
    └── js
        ├── bootstrap.js
        └── bootstrap.min.js

3 directories, 12 files

while the structure of downloaded directory looks so:

    ➜  glyphicons_free  tree

        .
        ├── _changelog.txt
        ├── _readme_first.txt
        ├── glyphicons
        │   └── png
        │       ├── glyphicons_000_glass.png
            . . .
        │       └── glyphicons_469_server_new.png
        └── glyphicons_social
            └── png
                ├── glyphicons_social_00_pinterest.png
            . . .
                └── glyphicons_social_49_ios.png

4 directories, 522 files

Where should i put this png files? How should I refere to them?

Possible Duplicate? http://stackoverflow.com/questions/18401035/twitter-bootstrap-3-create-a-custom-glyphicon-and-add-to-glyphicon-font — haxtbh, Apr 29 '14 at 15:49
@haxtbh I think there is provided example of using one big SVG and I have downloaded a plenty of PNG's. — andilabs, Apr 29 '14 at 15:56

score 3 · Accepted Answer · edited Jan 18 '16 at 05:50

3

I usually use the icomoon app to convert svg files into a typeface.

PNG would not give you the best result, you need to get the image source either AI or other vector sources, convert them into svg and feed it into this app and you can get your font.

I don't think you can repack bootstrap fonts without having the sources, unless you create a new typeface with your added glyphs and all the existing bootstrap ones. which you can get their source here: Glyphicons althought not for free.

edited Jan 18 '16 at 05:50

JRodDynamite

12,325
5
43
63

answered Apr 29 '14 at 15:57

makeitmorehuman

11,287
3
52
76

1

could you provide some wokring example of usage in bootstrap environment? – andilabs Apr 29 '14 at 20:20

how to add additional glyphicons from glyphicons.com (png files) to bootstrap 3?

1 Answers1