グリフィコンをLIの箇条書きとして使用する（ブートストラップ3）
サイモンイースト
HTMLリストの箇条書きを変更して、Bootstrap 3に付属のグリフィコンを使用するにはどうすればよいですか？
そのため：
<ul>
<li>...</li>
<li>...</li>
</ul>
次のように表示されます。
[icon] Facere possimus, omnis voluptas assumenda est, numquam eius modi
omnis dolor repellendus. Non numquam eius modi numam dolor omnis
tempora incidunt ut labore.
[icon] Facere possimus, omnis voluptas assumenda est, numquam eius modi
omnis dolor repellendus. Non numquam eius modi numam dolor omnis
tempora incidunt ut labore.
私は希望ではないこのような余分なHTMLを注入するために持っています...
<ul>
<li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
<li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
</ul>
サイモンイースト
これは少しのCSSでそれほど難しくはなく、画像を拡大縮小して色付けすることができ、すべての解像度で鮮明に保たれるため、弾丸に画像を使用するよりもはるかに優れています。
Bootstrapドキュメントを開き、使用する文字を調べて、グリフィコンの文字コードを見つけます。
次のCSSでその文字コードを使用します
li { display: block; } li:before { /*Using a Bootstrap glyphicon as the bullet point*/ content: "\e080"; font-family: 'Glyphicons Halflings'; font-size: 9px; float: left; margin-top: 4px; margin-left: -17px; color: #CCCCCC; }フォントのサイズと好みに合わせて、色と余白を微調整することをお勧めします。
デモとコードを見る
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
編集
関連記事
Related 関連記事
- 1
ブートストラップ リストからの単一の箇条書きアイコンの削除
- 2
箇条書きと異なるフォントを含むヘッダーと本文に 1 つのテキスト ブロックを使用する
- 3
ブートストラップ：リスト-箇条書きとインライン？
- 4
オブジェクトボックスから複数行をテキスト/箇条書きVBAとしてクリップボードにコピー
- 5
XSLTを使用してマルチレベルの箇条書きリストのタグを編集する
- 6
rmarkdownとpandocを使用してテーブルに（箇条書き）リストを書き込む方法
- 7
Wordからプレーンテキストにコピーして貼り付けるときに、ネストされた箇条書きリストのインデントを保持する
- 8
CakePHP：画像リンクとしてのブートストラップグリフィコンの使用
- 9
CakePHP 3でグリフィコンを使用してブートストラップボタンを出力するにはどうすればよいですか？
- 10
リストアイテムの箇条書きがフローティング要素と重なるのはなぜですか
- 11
Rmarkdownを使用してWordで箇条書きとしてリストを印刷する方法
- 12
画像やスパンタグを使用せずにCSSを介してUL / LIhtmlリストに箇条書きの色を設定する方法
- 13
単一のリストアイテム要素を使用して、箇条書きにFontAwesomeアイコンを使用する
- 14
<li>要素のテキストと箇条書きを中央に配置します
- 15
カスタム箇条書きを使用するときに折り返されるliテキストの整列
- 16
ブートストラップのボタンの代わりにスパンタグとグリフィコンを使用してドロップダウンメニューを作成するにはどうすればよいですか？
- 17
HTML / CSS：リストアイテムの箇条書きに別のフォントを使用する方法
- 18
jqueryを使用してリストアイテム内のブートストラップグリフィコンをスライドさせる方法は？
- 19
すべてのボタンにグリフィコンを追加する（ブートストラップ3.5）
- 20
パワーポイントで、テキストボックスの箇条書きアイコンを「ここをクリック」ボックスと同じアイコンを使用するにはどうすればよいですか？
- 21
書き込み効率の高い「コンパクトストレージを使用してオプションを使用してテーブルを作成する」と「クラスタリング順序ストレージを使用してオプションを使用してテーブルを作成する」のどちらですか。
- 22
他のクラスが動作しているときにブートストラップグリフィコンがロードされない
- 23
箇条書きのアイテムからリストを動的にフォーマットするJavascript
- 24
Wordの箇条書きリストにブックマークを動的に割り当てる
- 25
WindowsPhoneで3つのグリフィコンをブートストラップします
- 26
リスト内の箇条書きの代わりにアイコンを使用する
- 27
プレースホルダーとして複数の箇条書きを使用する方法
- 28
ng-repeatを使用して、インデックスごとに1つの箇条書きを持つ重複を含むオブジェクトの子配列のリストを表示します
- 29
nmslibを使用してフラスコアプリケーションをユニットテストするときのインポートエラー
コメントを追加