how to add additionall glyphicons to bootstrap3

Question

I would like to use additional glyphicons, not in standard bootstrap like for example dog.

I was following this instruction [LINK]

In HTML:

<link href="css/bootstrap.icon-large.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="js/bootstrap.min.js"></script>

<span class="glyphicons-icon dog"></span>

My directories tree:

.
├── README.md
├── css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.icon-large.css
│   ├── bootstrap.icon-large.min.css
│   └── bootstrap.min.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons.png
├── img
│   └── glyphicons.png -> ../glyphicons.png
├── index.html
└── js
    ├── bootstrap.js
    └── bootstrap.min.js

4 directories, 18 files

Answer 1

You use the wrong CSS classes, try the following HTML:

<span class="icon-large icon-dog"></span>

When you inspect the source of the bootstrap.icon-large.css file you will find out why:

.icon-large {
    background-image: url("../img/glyphicons.png");
    background-position: 24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 28px;
    line-height: 28px;
    vertical-align: text-bottom;
    width: 28px;
}
.icon-large.icon-glass{ background-position: 0 0;  } 
.icon-large.icon-leaf{ background-position: 0 -34px;  } 
.icon-large.icon-dog{ background-position: 0 -69px;  }