Angular.js Todo アプリケーションのビデオ チュートリアルを進めていたところ、index.html ファイルに Twitter Bootstrap 3 グリフィコンが含まれているという問題に遭遇しました (アイコンは、Chrome と Firefox の両方で説明のない画像として表示されます)。
これは、index.html に bootstrap および bootstrap-glyphicons css ファイルを追加する方法です。
<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>
そして、これはファイルの後半で必要なグリフィコンを追加する方法です:
<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>
bootstrap-glyphicons フォント ファイルは、bootstrap/css/fonts にあります。具体的には、ファイルは次のとおりです。
- glyphiconshalflings-regular.eot
- glyphiconshalflings-regular.otf
- glyphiconshalflings-regular.svg
- glyphiconshalflings-regular.ttf
- glyphiconshalflings-regular.woff
アイコンに適切にアクセスするために何をすべきかについて何か考えはありますか? 手伝ってくれてどうもありがとう！