Ersetze Caret Png durch Fontawesome Caret in CSS-Datei

Question

Ich möchte das Hintergrundbild in meinem Menü durch eine Zeichenfolge ersetzen, die ein FontAwesome-Zeichen verwendet. Es ist ein Fertigmenü, ein Modul in Joomla.

Es sieht wie folgt aus:

Hier ist die CSS:

.responsiveMenuTheme5m.isMobile > li.deeper > span { 
    background-image: url("../images/downArrow.png") !important; 
    background-position: right 57px !important; 
    background-repeat: no-repeat !important; 
} 

So ist der Menü-Coder ein Bild zur Verfügung gestellt genannt downArrow.png. Das ist im Grunde eine Sorge. Ich möchte dies durch FontAwesome <span class="fa fa-caret-down"> </span> ersetzen. Ich habe eine Twitter Bootstrap 3 Vorlage und ich habe FontAwesome installiert, also dachte ich, dies sollte eine Möglichkeit sein, auch ohne mit dem Menücode herumzuspielen, aber nur mit CSS.

Kann mir jemand helfen, es zu tun?

Answer 1

Versuchen Sie, diese

.responsiveMenuTheme5m.isMobile > li.deeper > span{ 
    display: inline-block; 
    font: normal normal normal 14px/1 FontAwesome; 
    font-size: inherit; 
    text-rendering: auto; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 
.responsiveMenuTheme5m.isMobile > li.deeper > span:before { 
    content: "\f0d7"; 
} 

Answer 2

Sie sollten diese in der Lage sein, durch css von span-Element zu ändern. Wenn alles in Ordnung ist und die Schriftart ist fantastisch importiert korrekt durch Zugabe:

.responsiveMenuTheme5m.isMobile > li.deeper > span:before { content: "\f0d7"; }

Ihre Schrift erscheint.

Sie können diesen Code überprüfen http://fontawesome.io/icon/caret-down/

Answer 3

Sie auch das man versuchen kann:

.responsiveMenuTheme5m.isMobile > li.deeper > span { 
    background-position: right 57px !important; 
    background-repeat: no-repeat !important; 
} 

den Cursor mit dem folgenden Code ersetzen:

<i class="fa fa-caret-down"></i> 

Sie könnten die verwenden <span> als eine Option, so:

<span class="fa fa-caret-down"></span> 

Möglicherweise müssen Sie mit der linken Caret-Distanz spielen, indem Sie die Werte in der Hintergrundposition ändern.