it-swarm.com.de

Verwenden eines Glyphikons als LI-Aufzählungspunkt (Bootstrap 3)

Wie kann ich die Aufzählungspunkte in einer HTML-Liste ändern und die mit Bootstrap 3 gelieferten Glyphicons verwenden?

Damit:

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

Anzeige als:

 [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 es vorziehen, dassnichtzusätzliches HTML wie dieses einfügen muss ...

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

Dies ist mit ein wenig CSS nicht allzu schwierig, und es ist viel besser als ein Bild für das Aufzählungszeichen, da Sie es skalieren und einfärben können und es bei allen Auflösungen scharf bleibt.

  1. Suchen Sie den Zeichencode des Glyphicons, indem Sie die Bootstrap-Dokumente öffnen und das gewünschte Zeichen prüfen.

    Inspecting a glyphicon

  2. Verwenden Sie diesen Zeichencode in der 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;
    }
    

    Sie können die Farbe und die Ränder an Ihre Schriftgröße und Ihren Geschmack anpassen.

Demo & Code anzeigen

104
Simon East

Wenn hier jemand mit Font Awesome Icons (wie ich) war, sehen Sie hier: https://fontawesome.com/how-to-use/on-the-web/styling/icons-in -Liste

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

Die Klassen fa-ul und fa-li ersetzen problemlos Standardaufzählungszeichen in ungeordneten Listen.

31
FastTrack

Ich verwende eine vereinfachte Version (nur Position relativ) basierend auf der Antwort von @SimonEast:

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

Wenn Sie möchten, dass Sie weniger verwenden, können Sie dies folgendermaßen erreichen:

li {
    .glyphicon-ok();

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

Wenn Sie für jedes Listenelement ein anderes Symbol verwenden möchten, empfiehlt es sich, Symbole in HTML hinzuzufügen, anstatt ein Pseudo-Element zu verwenden, um Ihr CSS-Element zu deaktivieren. Das geht ganz einfach wie folgt:

<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

In diesem Fall verwendete ich Material Design Icons

DEMO ANZEIGEN

0
bskool

Mit Font Awesome 5 ist das Markup etwas komplexer als die vorige Antwort. Pro der FA-Dokumentation sollte die Auszeichnung sein:

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