Brauchen Sie Hilfe beim Stapeln von font-awesome Icons - CSS, font-awesome

Ich habe kürzlich die font-awesome Version von 3.2.1 zu 4.

Ich hatte das in Arbeit 3.2.1

<li><span class="icon-stack stacked"><i class="icon-circle icon-stack-base"></i><i class="icon-phone icon-2x icon-light">
</i></span><span class="stacktext">Your Phone Number</span></li>

.stacked
{
float: left;
margin-right: 15px;
color: #3ECCFC;
}

.stacktext
{
text-align:left;
font-size: 14px;
color: #444444;
}

Aber es stapelt sich nicht gut in version 4.

<li><span class="fa fa-stack stacked"><i class="fa fa-circle fa fa-stack-base"></i><i class="fa fa-phone icon-2x fa fa-light">
</i></span><span class="stacktext">Your Phone Number</span></li>

Antworten:

4 für die Antwort № 1

Sie müssen nur die Klasse verwenden fa einmal in class="". Ich habe mehrere Bits in Ihrem Code aktualisiert.

Definieren Sie die Hauptstapelgröße in der <span> um die <i> Elemente. stacked ist in Font Awesome 4 veraltet, seit fa-stack definiert auch einen Stapel. Ebenfalls fa-light wird geändert in fa-inverse. Zu guter Letzt fa-stack-1x und fa-stack-2x werden verwendet, um die Symbole im Stapel zu skalieren. fa-stack-2x wird verwendet, um ein Symbol größer als das andere Symbol im Stapel zu machen.

Alles zusammen ergibt:

<li>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-phone fa-stack-1x fa-inverse"></i>
</span>
<span class="stacktext">Your Phone Number</span>
</li>

Bitte überprüfen Sie die Stack-Beispiele auf der Font Awesome Website: Stapel.


0 für die Antwort № 2

Das icon- Klassenpräfix werden fa fa- :

icon- * -> fa fa- *

Quelle: https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4


Speisekarte