関連する読み物：
ブートストラップグリファイコンフォントアイコンの詳細な説明
フォントアイコンとは何かを教えてください。
フォントアイコンは、Webプロジェクトで使用されるアイコンフォントです。 Glyphiconsのハーフリングには商用ライセンスが必要ですが、これらのアイコンをプロジェクトベースのブートストラップで無料で使用できます。
アイコンの著者に感謝の気持ちを表明するために、使用時にGlyphicons Webサイトにリンクを追加することを願っています。
私は長い間ブートストラップを使用してきましたが、ビルトインのグリフィクスアイコンは小さなプロジェクトのニーズを満たすのに十分です。アイコンを表示するために1つのスタイルを使用するだけです。それは驚くべきことですが、私はそれがどのようにそれを実装したかを分析したことがありません。 Chrome開発者ツールを介して対応するエレクトロを見つけた後、彼はCSS擬似要素技術を使用していることを知りました。
<span> </span>
.glyphiconsは、すべてのGlyphiconsアイコンフォントのスタイルを定義します
.glyphicons {position：relative; top：1px; display：inline-block; font-family： 'glyphicons halflings'; font-style：normal; font-weight：400; line-height：1; -webkit-font-smoothing：}}表示されたコンテンツは、次のような別のクラスで定義されたサブクラスによって定義されます。
.glyphicon-eur：前、.glyphicon-euro：before {content： "/20ac";}ドキュメントを調べると、以下に加えて（CSS2実装：要素の前にコンテンツを追加）、First-letter（CSS1実装、テキストの最初の文字に特別なスタイルを追加し、ディスプレイがブロックされるように設定されたときに有効）、：First-Line（CSS1実装、テキストの最初のラインに特別なスタイルを追加します。
原則を理解すると、コードは簡単になります。特定のコードは次のとおりです。
<！doctype html> <head lang = "zh-cn"> <head> <meta charset = "gb2312"> <title> miaoqiyuan.cn </title> <style type = "text/css"> body {background：#ccc; font-family： 'microsoft yahei ';}。container {background：#fff; width：800px; margin：50px auto; border：solid 1px＃0096d7; border-radius：10px;}。コンテナ{font-size：16px; font-width：200; 15px;}。コンテナh2 a {color：#fff;}。コンテナーul {list-style：none; padding：0; marge：0;} ul.me {padding：5px;} ul.me li {margin：5px 10px; background：#eee; height：40px; line-height; line-height; height; #ddd; border-radius：10px;}。font-icon：before、.font-icon：after {font-family： 'Impact'; font-size：16px; color：＃0096d7; padding：4px 6px;擬似要素は要素に影響を与えませんスタイル*/。font-icon {color：＃090; font-family： 'airal';}。web：before {content： 'home';} ore {color：＃c00;} h2：first-letter {font-size：20px; color：＃c00;}。チャット：後の{content： 'chatme！'; background：＃fdc; color：＃d76900; border-color：＃d76900; margin-left：5px;} </style> </stely> <hed <pired> href = "http://www.miaoqiyuan.cn/p/bootstrap-glyphicons-font-how-to-achieve/"> bootstrap glyphicons font実装方法</a> </h2> <div> <ul> <！ - glyphiconsメソッドhttp://www.miaoqiyuan.cn/</li> <！<！ - - 内部に効果を入れます - > <li> <span> </span> mqycn2 </li> <！ - glyphiconsメソッド - > <li> <li> <li> 77068320 1301425789 </span </span <内部 - > <li> <span> </span> mqycn2 </li> <！ - glyphiconsメソッド - > <li> <span> 77068320 1301425789 </span> <span> </span> <！ - 内部に効果を置く - > <li> <li> <li> </li> </li> <方法 - > <li> <span> 77068320 1301425789 </span> <span> </span> <！ - 内部に効果を置く - > <li> <li> <li> <li> <span> </span> <！ - glyphiconsメソッドの前後の方法 - > <li> <li> <li> <li> <li> <li> <li> <li> </span </</</</</</</</< Glyphiconsメソッドのフロントとバック - > <li> <li> 77068320 1301425789 </span> <span> </span> </li> <！ - 通常のスタイルと同じように、内部効果とスタイルのオーバーレイを置きます。後者の設定では、以前の設定 - > <li> <span> mqycn2 </span> </li> </ul> </div> </div> </body> </html>も上書きされます編集者が紹介したBootstrap Glyphiconsフォントアイコン実装方法は終わりました。ご不明な点がございましたら、メッセージを残してください。編集者は、すべての人に時間内に返信します！