Convert img-Tag zur Anzeige FontAwesome Symbol

Ich habe ein Produkt von Drittanbietern, die ein Symbol über einen <img> Tag mit einem Hintergrundbild über CSS gesetzt ausgibt.Convert img-Tag zur Anzeige FontAwesome Symbol

Ich könnte wahrscheinlich etwas Javascript schreiben, um den HTML-Tag selbst zu etwas anderem zu ändern, aber ich würde lieber die CSS ändern, um ein FontAwesome-Symbol mit den :before und content="{FontAwesomeText}" anzuzeigen.

Allerdings kann ich das nicht zur Arbeit bringen ... weiß jemand, ob dies möglich ist?

Bitte sehen

.x-tree-icon-leaf:before { 
    content: ""; 
    font-size: 0.6em; 
    position: relative; 
    top: -3px; 
} 

.x-tree-icon-leaf { 
    font-family: FontAwesome; 
    width: 20px; 
    height: 20px; 
    display: inline-block; 
    color: #5fa2dd; 
}

https://jsfiddle.net/uz9q6m33/

Quelle

2016-08-16 Glen Hong

Ihre jsFiddle nicht richtig die FontAwesome Bibliothek importiert wurden.
Sie können einfach kopieren nicht den Charakter einfügen und legen Sie sie in content, müssen Sie den richtigen Unicode-Wert dieses bestimmten Symbol, das ist: \f06c
img nicht Pseudoelemente haben, verwenden Sie eine eingestuft Geschwister oder Eltern für die Symbol und verstecken Sie das Bild mit display: none.

Arbeitscode:

.x-tree-icon-leaf, .x-tree-icon-text::before { 
 
    font: normal normal normal 14px/1 "FontAwesome"; 
 
    display: inline-block; 
 
    color: #5fa2dd; 
 
} 
 

 
.x-tree-icon-leaf::before, .x-tree-icon-text::before { 
 
    content: "\f06c\00a0"; 
 
    font-size: 1em; 
 
    position: relative; 
 
    top: -1px; 
 
} 
 

 
img.x-tree-icon-leaf { display: none; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<!-- working with normal span --> 
 
<div> <span class="x-tree-icon-leaf"></span> <span>Hello</span> </div> 
 

 
<!-- hiding image then applying icon to text-span --> 
 
<div> <img class="x-tree-icon-leaf"> <span class="x-tree-icon-text">Hello</span> </div>

jsFiddle Gabel: https://jsfiddle.net/azizn/1y3jwnsg/

Hinweis: hinzufügen \00a0 am Ende content:'' Zeichenfolge um einen Raum zu zwingen, für Konsistenz . Das Symbol wird gleichzeitig auf x-tree-icon-leaf und x-tree-icon-text angewendet. Wenn x-tree-icon-leaf ein img-Tag ist, wird es ausgeblendet.

Quelle

2016-08-17 00:12:41 Aziz

Hallo ... wenn ich das FontAwesome als externe Referenz eingerichtet habe, funktionierte es. Entschuldigung, wenn das nicht mehr der Fall ist. Allerdings war das Problem nicht die erste Spanne (wie ich hatte funktioniert) es ist die Tag wie in der OP geschrieben, die ich versuche, die FontAwesome Inhalt anzuzeigen :) –

Auch muss sich jemand entschuldigen vorgeschlagen neue Arbeit auf meinem OP und ein Teil des wichtigen Textes war entfernt worden ... und deshalb war es nicht klar, dass es sich um das "img" -Tag handelte, das ich korrigieren wollte. Ich htink Ich habe den Beitrag aktualisiert ... Danke –

@GlenHong Sie möchten ein 'img' mit Ihrem Symbol ersetzen? 'img' ist ein sich selbst schließendes Tag und kann keine Pseudoelemente haben. Gibt es ein klassifiziertes Geschwister oder Elternteil zu diesem Bild, das stattdessen manipuliert werden kann, während das Bild mit' display: none; '? – Aziz

Convert img-Tag zur Anzeige FontAwesome Symbol

Antwort

Verwandte Themen