All geek questions in one place

Unable to display Twitter bootstrap glyphoscopes correctly

I worked on the Angular.js Todo video processing tutorial, and I ran into a problem, including Twitter Bootstrap 3 glyphics in the .html index (icons are displayed as non-descriptive images, both in Chrome and Firefox).

This is how I add bootstrap and bootstrap-glyphicons css files to 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 add 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 font files are located in bootstrap / css / fonts. In particular, the files:

  • glyphiconshalflings-regular.eot
  • glyphiconshalflings-regular.otf
  • glyphiconshalflings-regular.svg
  • glyphiconshalflings-regular.ttf
  • glyphiconshalflings-regular.woff

Any thoughts on what to do to properly access the icons? Thank you so much for your help!

+4
source share
1 answer

At first I checked the versions on your libs.

If you are using a version prior to this transfer request , you can point to assets that do not exist. In the Bootstrap 3.0.0-wip branch, glyphics are highlighted before this repo .

I would also start the path to URL resources using / to call from the base URL.

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

On the official landing glyphicon, the example uses <span></span> rather than <i></i>

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

Perhaps they changed this agreement.

EDIT

In the source code, you will see the absolute paths to the assets. Double check that your fonts directory is at the same level as the css directory.

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

Source: https://habr.com/ru/post/1495795/

More articles:


All Articles