Unicode tramite CSS: prima

Sto usando Font Awesome sulla mia pagina Web e voglio visualizzare un’icona all’interno di :before pseudo element.

Secondo la documentazione / il cheatsheet , devo digitare per ottenere questo carattere, ma non funziona. Credo che sia normale perché le quadro HTML non sono supportate in :before .
Quindi ho cercato un po ‘su google e ho scoperto che, se vuoi visualizzare le quadro HTML in :before , devi usare il riferimento esadecimale con escape.
Quindi stavo cercando il riferimento esadecimale in ma non ho trovato nulla. Credo che sia perché si tratta di valori di “uso privato”, qualunque cosa significhi.

C’è un modo per farlo funzionare :before ?

Il riferimento esadecimale sfuggito di è \f066 .

 content: "\f066"; 

Nei CSS, FontAwesome unicode funziona solo quando viene dichiarata la famiglia di caratteri corretta (versione 4 o inferiore):

 font-family: "FontAwesome"; content: "\f066"; 

Aggiornamento: la versione 5 ha nomi diversi:

Gratuito

 font-family: "Font Awesome 5 Free" 

professionista

 font-family: "Font Awesome 5 Pro" 

Marche

 font-family: "Font Awesome 5 Brands" 

Vedi questa risposta correlata: https://stackoverflow.com/a/48004111/2575724

Fileformat.info è un buon riferimento per questa roba. Nel tuo caso, è già in esadecimale, quindi il valore esadecimale è f066 . Quindi dovresti fare:

 content: "\f066"; 

I punti di codice utilizzati nei trucchi dei font di icone sono in genere punti di codice Uso privato, il che significa che non hanno un significato generalmente definito e non devono essere utilizzati nello scambio di informazioni aperte, solo per accordo privato tra le parti interessate. Tuttavia, i punti codice Uso privato possono essere rappresentati come qualsiasi altro valore Unicode, ad esempio in CSS usando una notazione come \f066 , come altri hanno risposto. Puoi anche inserire il punto di codice come tale, se il tuo documento è codificato in UTF-8 e sai come digitare un valore Unicode arbitrario per il suo numero nell’ambiente di creazione (ma naturalmente sarebbe normalmente visualizzato usando un simbolo per uno sconosciuto carattere).

Tuttavia, questo non è il modo normale di utilizzare i caratteri dell’icona. Normalmente si usa un file CSS fornito con il font e si usano costrutti come foo . Il codice CSS si occuperà quindi di inserire il simbolo all’inizio dell’elemento e non è necessario conoscere il numero del codice.

Al primo collegamento il file CSS fontwaesome nel file HTML quindi crea una pseudo class precedente o successiva come “font-family:” FontAwesome “; content:” \ f101 “;” quindi salva. Spero che funzioni bene.