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

Bass Jobsen · Accepted Answer · 2014-11-02 22:27:50Z

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

I have tried, but I got pencil icon instead of dog ;( it uses still halfings when I look into resources instead og glyphicons.png...
btw till I don't buy PRO I don't have vectors, and can not change color, etc, am I right?
yes, i do think so. Because of this method only adds the icons via png, which in contrast to fonts can not styled with CSS.

Collectives™ on Stack Overflow

how to add additionall glyphicons to bootstrap3

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related