web-dev-qa-db-ja.com

Glyphiconを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.

notは、このような追加のHTMLを挿入する必要があります...

<ul>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
</ul>
twitter-bootstraptwitter-bootstrap-3glyphiconsbulletedlist
41
Simon East

これは、CSSが少なければそれほど難しくなく、弾丸に画像を使用するよりもmuch優れています。すべての解像度でシャープになります。

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

    Inspecting a glyphicon

  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;
}

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

デモとコードを表示

107
Simon East

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クラスは、番号なしリストのデフォルトの箇条書きを簡単に置き換えます。

31
FastTrack

私は@SimonEastの答えに基づいて単純化されたバージョン（位置相対を使用するだけ）を使用しています：

li:before {
    content: "\e080";
    font-family: 'Glyphicons Halflings';
    font-size: 9px;
    position: relative;
    margin-right: 10px;
    top: 3px;
    color: #ccc;
}
7
Caumons

LESSを使用したい場合は、次のように実現できます。

li {
    .glyphicon-ok();

    &:before {            
        .glyphicon();            
        margin-left:-25px;
       float:left;
    }
}
1
Damien B

リスト項目ごとに異なるアイコンが必要な場合は、CSSを抑えるために擬似要素を使用する代わりに、HTMLにアイコンを追加することをお勧めします。次のように簡単に実行できます。

<ul>
  <li><span><i class="mdi mdi-lightbulb-outline"></i></span>An electric light with a wire filament heated to such a high temperature that it glows with visible light</li>
  <li><span><i class="mdi mdi-clipboard-check-outline"></i></span>A thin, rigid board with a clip at the top for holding paper in place.</li>
  <li><span><i class="mdi mdi-finance"></i></span>A graphical representation of data, in which the data is represented by symbols, such as bars in a bar chart, lines in a line chart, or slices in a pie chart.</li>
  <li><span><i class="mdi mdi-server"></i></span>A system that responds to requests across a computer network worldwide to provide, or help to provide, a network or data service.</li>
</ul>

-

ul {
  list-style-type: none;
  margin-left: 2.5em;
  padding-left: 0;
}
ul>li {
  position: relative;
}
span {
  left: -2em;
  position: absolute;
  text-align: center;
  width: 2em;
  line-height: inherit;
}

enter image description here

この場合、私は Material Design Icons を使用しました

デモを見る

0
bskool

Font Awesome 5を使用すると、マークアップは前の回答よりも少し複雑になります。 FAドキュメント ごとに、マークアップは次のようになります。

<ul class="fa-ul">
  <li><span class="fa-li" ><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-Pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>
0
Bob.at.Indigo.Health