Wie font-awesome Symbol vertikal ausrichten

Ich benutze font-awesome für Batterie, aber es ist horizontal ausgerichtet. Ich brauche es vertikal. Ich kann es bekommen.Wie font-awesome Symbol vertikal ausrichten

M mit diesem

<i class="fa fa-battery-full" aria-hidden="true"></i>

Tatsächliches Ergebnis

Das ist das erwartete Ergebnis

Quelle

2017-07-03 ashworx

Verwenden fa-rotate- {Grad} nach font ehrfürchtigem –

.fa.fa-battery-full {  
 
    -webkit-transform: rotate(-90deg); 
 
    -moz-transform: rotate(-90deg); 
 
    -ms-transform: rotate(-90deg); 
 
    -o-transform: rotate(-90deg); 
 
    transform: rotate(-90deg); 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-battery-full" aria-hidden="true"></i>

Quelle

2017-07-03 10:25:52

Verwendung CSS-Eigenschaft transform: rotate(-90deg);, .fa-battery-full{ transform: rotate(-90deg);}.

Quelle

2017-07-03 10:22:57

Vielen Dank für diesen Code-Schnipsel, die eine sofortige Hilfe bieten können. Eine richtige Erklärung [würde erheblich verbessern] (// meta.stackexchange.com/q/114762) ihren pädagogischen Wert, indem sie * warum * dies eine gute Lösung für das Problem ist, und es für zukünftige Leser mit ähnlichen, nützlicher machen würde, aber nicht identisch, Fragen. Bitte [bearbeiten] Sie Ihre Antwort, um eine Erläuterung hinzuzufügen und geben Sie an, welche Einschränkungen und Annahmen gelten. –

Verwenden Sie CSS, um das Symbol zu drehen.

.fa.fa-battery-full { transform: rotate(270deg); }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-battery-full" aria-hidden="true"></i>

Quelle

2017-07-03 10:23:08 Gerard

mit nativen font-awesome Klassen aus dem documentation

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<i class="fa fa-battery-full fa-rotate-270" aria-hidden="true"></i>

fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical

Quelle

2017-07-03 10:25:11 rgunning

Dies ist der beste, wird meine löschen, da ich vergessen habe, dass sie so etwas haben x) –

Sie können diese 2 Möglichkeiten erreichen: die FA-Klassen oder durch einige Transformation Stile zu dem Tag Hinzufügen oder fügen Sie eine weitere Klasse hinzu Stile.

Um FA-Klassen verwenden verwenden, um die Klasse 'fa drehen-270' Ihre Symbol 270 Grad im Uhrzeigersinn zu drehen:

<i class="fa fa-battery-full fa-rotate-270"/></i>

Die obige rotaion unterstützt Rotationsschritte von '90' '180' und '270' nur.

Wenn Sie eine Transformation statt anwenden wollte (möglicherweise könnten Sie weiter auf diese Weise anpassen) Ihr Code würde wie folgt aussehen:

<i class="fa fa-battery-full" style="transform: rotate(-90deg);" aria-hidden="true"></i>

Bitte beachten Sie auch, dass die folgenden sind Cross-Browser-kompatible Versionen der Transformation, wenn Sie möchten die Kompatibilität sicherstellen.

-moz-transform: rotate(-90deg); 
-webkit-transform: rotate(-90deg); 
-o-transform: rotate(-90deg); 
-ms-transform: rotate(-90deg); 
transform: rotate(-90deg);

Quelle

2017-07-03 10:26:05

jQuery verwenden:

$(function(){ 
    $('.fa.fa-battery-full').css({"transform": "rotate("+-90+"deg)"}); 
    });

jsfiddle

Quelle

2017-07-03 10:42:35

Wie font-awesome Symbol vertikal ausrichten

Antwort

Verwandte Themen