45

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>
4

6 に答える 6

117

これは少しの CSS でそれほど難しくなく、弾丸に画像を使用するよりもはるかに優れています。拡大縮小や色付けが可能で、すべての解像度でシャープさを保つことができるからです。

  1. Bootstrap ドキュメントを開き、使用する文字を調べて、グリフィコンの文字コードを見つけます。

    グリフィコンの検査

  2. その文字コードを次の 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;
}

    フォントのサイズと好みに合わせて、色と余白を微調整することもできます。

デモとコードを見る

于 2015-07-03T01:03:51.953 に答える
36

誰かが Font Awesome Icons でこれをやろうとしてここに来ている場合 (私のように) ここに表示: https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

fa-ulおよびクラスはfa-li、順序付けられていないリストのデフォルトの箇条書きを簡単に置き換えます。

于 2016-03-25T17:51:11.880 に答える
10

@SimonEastの回答に基づいて、簡略化されたバージョン（相対的な位置を使用するだけ）を使用しています：

li:before {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    position: relative;
    margin-right: 10px;
    top: 3px;
    color: #ccc;
}
于 2015-11-25T16:13:54.953 に答える