Bootstrap Glyphicons funktionieren nicht

A

asdfa

Grünschnabel
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:

bootstrap.png

Code dazu:

Code: 
<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>
 
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:

Code: 
<!-- 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:

Code: 
 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 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.
Zum Vergrößern anklicken....
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.
 
Zuletzt bearbeitet:
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.

glyphicon.png

Code: 
<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>
 
asdfa hat gesagt.:
Ah okey, wo siehst du wie genau diese speziellen Icons eingebunden werden?
Zum Vergrößern anklicken....
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:

CSS: 
/* 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"}
 
Zuletzt bearbeitet:
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück