Bootstrapアイコン
4122 ワード
アイコンコンポーネント
Bootstrapが提供する小さなアイコン:Bootstrap中国語公式サイトコンポーネントを参照できます
げんり
Bootstrapフレームワークのアイコンはすべてフォントアイコンで、css 3の@font-face属性とフォントを組み合わせることでicon効果を実現します.
@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‘);
}これらのフォントは、Bootstrapフレームワーク内のfontsディレクトリ(iconを作成するためのフォントファイルを格納)から取得され、要素に「glyphicon」クラス名を追加することによって実現され、偽クラス「:before」の「content」属性によって対応するicon符号化が呼び出されます.
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: ‘Glyphicons Halflings‘;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
<span class="glyphicon glyphicon-asterisk"></span>使用
他のコンポーネントと混合して使用しない場合は、またはラベルを使用してアイコンクラスを使用すると、テキストコンテンツまたはサブ要素を含まない要素にのみ適用できます.
小さなアイコンの使用
<span class="glyphicon glyphicon-search">span>
<i class="glyphicon glyphicon-asterisk">i>
結合ボタン
<button class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star">span>
button>