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

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?

Solution

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.