Usa l'icona FontAwesome all'interno di un :: before pseudo element con attr()

Question

Sto cercando di inserire un'icona FontAwesome all'interno di uno pseudo elemento ::before con attr(). Il codice originale è più complessa, ma questo vi darà un'idea di quello che voglio:

<div data-background-icon="\f086"></div> 

div::before { 
    content: attr(data-background-icon); 
    font-family: "FontAwesome"; 
} 

https://jsfiddle.net/grutcop8/

non funziona, mentre il solito modo per incorporare funziona OK:

div::before { 
    content: "\f086"; 
    font-family: "FontAwesome"; 
} 

Qualcosa che mi manca?

Answer 1

Prova con Unicode

sequenze di escape CSS funzionano solo all'interno delle stringhe CSS. Quando si prende una sequenza di escape CSS da un attributo HTML (ad esempio al di fuori del CSS), verrà letto letteralmente, non interpretato come parte di una stringa CSS.

Se si vuole codificare il carattere all'interno di un attributo HTML, è necessario per codificare come entità HTML.

è necessario aggiungere "&#x" prima del font-Codice icona impressionante. vale a dire, se si desidera utilizzare /f086, quindi scrivere &#xf086 invece

otteniate unicode da qui - https://fortawesome.github.io/Font-Awesome/cheatsheet/

div:before { 
 
    content: attr(data-background-icon); 
 
    font-family: "FontAwesome"; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div data-background-icon='&#xf086;'></div>

Answer 2

CSS legge \f086 come stringa e non come una sequenza di escape. La correzione è o usarlo direttamente all'interno di contenuti attribuire come content: '\f086'; o copiare direttamente e l'icona incollare in attributo HTML (assicurarsi di salvare il file come UTF-8)

HTML:

<div data-background-icon=""></div> <!-- this is the bluetooth icon copied from fontawesome --> 

CSS:

div::before { 
    content: attr(data-background-icon); 
    font-family: "FontAwesome"; 
} 

o fare uso di entità HTML:

HTML:

<div data-background-icon="&#xf086;"></div> 

CSS:

div::before { 
    content: attr(data-background-icon); 
    font-family: "FontAwesome"; 
} 

Fiddle: https://jsfiddle.net/76v9e2ur/1/