Unable to properly display Twitter Bootstrap glyphicons

13,340

I would first check the versions on your libs.

If you are using a version before this pull request you may be pointing to assets that don't exist. The Bootstrap 3.0.0-wip branch has abstracted glyphicons out to this repo.

I would also preceed the URL asset paths with a / to invoke from base URL.

<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/bootstrap/css/bootstrap-glyphicons.css">

On the offical glyphicons lander, an example uses <span></span> rather than <i></i>

<span class="glyphicon glyphicon-ok"></span>

It is possible they changed that convention.

EDIT

In the source you will see the absolute paths of the assets. Double check that your fonts directory is on the same level as the css directory.

src:url('../fonts/glyphiconshalflings-regular.eot');

13,340

Author by

AndraD

Scientist with a strong computation background

Updated on June 08, 2022

Comments

AndraD almost 2 years
I was working through the Angular.js Todo application video tutorial and I encountered a problem including the Twitter Bootstrap 3 glyphicons in the index.html file (the icons show up as non-descriptive images, both in Chrome and in Firefox).

This is how I am adding the bootstrap and bootstrap-glyphicons css files in index.html:
```
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
  <script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
  <script type="text/javascript" src="todo.js"></script>
  <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="bootstrap/css/bootstrap-glyphicons.css">
  <link rel="stylesheet" href="todo.css">
</head>
```
And this is how I am adding the required glyphicon later in the file:
```
<form class="form-horizontal">
  <input type="text" ng-model="formTodoText" ng-model-instant>
  <button class="btn"><i class="glyphicon glyphicon-plus"></i>Add</button>
</form>
```
The bootstrap-glyphicons fonts files are in bootstrap/css/fonts. Specifically, the files are:
1. glyphiconshalflings-regular.eot
2. glyphiconshalflings-regular.otf
3. glyphiconshalflings-regular.svg
4. glyphiconshalflings-regular.ttf
5. glyphiconshalflings-regular.woff
Any thoughts on what to do to properly access the icons? Thank you so much for your help!