Verwenden eines Glyphicon als LI-Punkt (Bootstrap 3)

Wie kann ich die Aufzählungspunkte in einer HTML-Liste und verwenden Sie die glyphicons, die mit Bootstrap 3?

So, dass:

<ul>
    <li>...</li>
    <li>...</li>
</ul>

Zeigt:

 [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.

Ich würde lieber nicht zu haben, um zu injizieren zusätzlichen HTML wie dieser...

<ul>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
    <li><i class="glyphicon glyphicon-chevron-right"></i> ...</li>
</ul>

InformationsquelleAutor der Frage Simon East | 2015-07-03

  1. 96

    Dies ist nicht allzu schwer mit ein wenig CSS und ist viel besser als ein Bild für die Kugel, da können Sie die Größe und Farbe, und es wird halten Sie scharf in allen Auflösungen.

    1. Finden Sie die Zeichen-code des glyphicon durch öffnen der Bootstrap docs und Inspektion das Zeichen, das Sie verwenden möchten.

      Verwenden eines Glyphicon als LI-Punkt (Bootstrap 3)

    2. Verwenden, Zeichen-code in die folgenden 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;
}

      Können Sie gerne zu zwicken die Farbe und die Margen entsprechend Ihrer schriftart, Größe und Geschmack.

    Demo ansehen & Code

    InformationsquelleAutor der Antwort Simon East

  2. 25

    Wenn jemand kommt hierher, schaut sich dies mit Font Awesome Icons (wie ich) hier ansehen: https://fortawesome.github.io/Font-Awesome/examples/

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

    Den fa-ul und fa-li Klassen leicht ersetzen Standard-Aufzählungszeichen in ungeordneten Listen.

    InformationsquelleAutor der Antwort FastTrack

  3. 7

    Verwende ich eine vereinfachte version (mit position relative) basierend auf dem @SimonEast Antwort:

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

    InformationsquelleAutor der Antwort Caumons

  4. 1

    Wenn Sie wollen, passieren, mit WENIGER kann erreicht werden, etwa so:

    li {
    .glyphicon-ok();

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

    InformationsquelleAutor der Antwort Damien B

Schreibe einen Kommentar