# Bootstrap Glyphicons funktionieren nicht



## asdfa (6. April 2014)

Hi Leute,

Beschäftige mich erst seit einem Tag mit Bootstrap und hatte vorher mit HTML/CSS auch nicht wirklich viel zutun.
Versuche für die Uni etwas AngularJS zu lernen und kam dadurch damit in Verbindung, da es etliche Tutorials verwenden.

Das Ganze sieht in Chrome jetzt so aus: 




Code dazu:


```
<html ng-app>
<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="todo.css">

</head>
<body>
<div ng-controller="TodoCtrl">
<h2> Total Todos: {{getTotalTodos()}}</h2>
 <ul class="list-unstyled">
     <li ng-repeat="todo in todos">
         <input type="checkbox" ng-model="todo.done">
         <span class="done-{{todo.done}}">{{todo.text}}</span>
     </li>
 </ul>
    <form class="form-horizontal">
        <input type="text" ng-model="formTodoText" ng-model-instant>
        <button class="btn" ng-click="addTodo()"> <i class="glyphicon-plus"></i>Add</button>
    </form>

    <button class="btn"><i class="icon-bar"></i>Clear Completed</button>
</div>

</div>
</body>
</html>
```


----------



## SpiceLab (6. April 2014)

asdfa hat gesagt.:


> Das Ganze sieht in Chrome jetzt so aus:
> 
> Anhang anzeigen 63117



Und wie soll es tatsächlich aussehen bzw. was funktioniert daran konkret nicht?


----------



## asdfa (6. April 2014)

Hi,

Aussehen sollte es denke ich mal so: http://getbootstrap.com/components/

Wenn ich nen anderes nehme, z.b icon-trash, kriege ich nur nen kleines Viereck, irgendetwas scheint es da wohl nicht richtig zu laden.

Selbiges Problem habe ich komischerweise auch, wenn ich es so mache:


```
<!-- Das neueste kompilierte und minimierte CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<!-- Optionales Theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

<!-- Das neueste kompilierte und minimierte JavaScript -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
```

Ob die Pfade richtig gesetzt sind, kann ich nicht genau sagen.

Die Fonts scheinen zu passen:


```
src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
```

Schonmal Danke für die sehr schnelle Antwort!


----------



## SpiceLab (6. April 2014)

asdfa hat gesagt.:


> Aussehen sollte es denke ich mal so: http://getbootstrap.com/components/


Augenscheinlich werden dort jeweils zwei CSS-Klassen in den HTML-Elementen implementiert, z.B. *class="glyphicon glyphicon-search"*, was in deinem eingangs gezeigten Code nicht der Fall ist.

Siehe das Kapitel How to use.


----------



## SpiceLab (6. April 2014)

spicelab hat gesagt.:


> Augenscheinlich werden dort jeweils zwei CSS-Klassen in den HTML-Elementen implementiert, z.B. *class="glyphicon glyphicon-search"*, was in deinem eingangs gezeigten Code nicht der Fall ist.
> 
> Siehe das Kapitel How to use.


Die erste Klasse definiert u.a. den Pfad zum Hintergrundbild bzw. Webfont, die zweite die jeweilige Hintergrundposition (analog zu CSS-Sprites) bzw. den individuellen Webfont-Text per *content*-Eigenschaft.

Zum Vergleich die CSS-Datei bootstrap.icon-large.css mit Hintergrundbild.


----------



## asdfa (6. April 2014)

Ah okey, wo siehst du wie genau diese speziellen Icons eingebunden werden?
Habe nochmals etwas rumprobiert, aber kriege eig immer nur ein stink normales Plus oder nen Viereck.





```
<html ng-app>
<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="todo.css">

</head>
<body>
<div ng-controller="TodoCtrl">
<h2> Total Todos: {{getTotalTodos()}}</h2>
 <ul class="list-unstyled">
     <li ng-repeat="todo in todos">
         <input type="checkbox" ng-model="todo.done">
         <span class="done-{{todo.done}}">{{todo.text}}</span>
     </li>
 </ul>
    <form class="form-horizontal">
        <input type="text" ng-model="formTodoText" ng-model-instant>
        <button class="btn" ng-click="addTodo()"> <i class="icon glyphicon-remove-sign"></i>Add</button>
    </form>

    <button class="btn"><i class="glyphicon-th-large glyphicon-plus"></i>Clear Completed</button>
</div>

</div>
</body>
</html>
```


----------



## SpiceLab (6. April 2014)

asdfa hat gesagt.:


> Ah okey, wo siehst du wie genau diese speziellen Icons eingebunden werden?


Hier mal ein Auszug aus der zugehörigen CSS-Datei bootstrap.min.css für die "Icon"-Klasse *.glyphicon-plus*, die per Webfont (= Glyphicons Halflings) die Icons erzeugt:


```
/* global Schriftart mittels @font-face definieren */
@font-face{font-family:'Glyphicons Halflings';src:url(../fonts/glyphicons-halflings-regular.eot);src:url(../fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(../fonts/glyphicons-halflings-regular.woff) format('woff'),url(../fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')}

/* für .glyphicon u.a. font-family festlegen */
.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:400;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

/* automatischen Elementinhalt per Pseudoelement :before u. content-Eigenschaft generieren */
.glyphicon-plus:before{content:"\2b"}
```


----------



## Jan-Frederik Stieler (6. April 2014)

Hi,
wenn du ein Viereck oder was anderes bekommst wird die Schrift nicht geladen.
Wenn du dev-Tools für Chrome oder Firebug verwendest kannst du schauen was genau nicht geladen wird.
Ich persönlich verwende lieber font-awesome für die Ions anstatt der Glyphicons.

Viele Grüße


----------

