Un utente ha chiesto informazioni su Customizr di Wordpress

FontAwesome non funziona più

Un utente ha chiesto 👇

Ho usato FontAwesome per la casella di ricerca ma non funziona più. Ecco il mio CSS.

/ * Posiziona una lente di ingrandimento davanti alla casella di ricerca * /
.my-nav-menu-search .search-form: before {
famiglia di caratteri: “FontAwesome”;
oggetto: ” f002″;
posizione: assoluta;
dimensione del carattere: 19px;
spessore del carattere: normale;
in alto: 5px;
sinistra: 5px;
}

Ho letto dell’aggiornamento della versione di FontAwesome e potrebbe essere necessario aggiungere il seguente codice da qualche parte. Non sono sicuro di dove aggiungerlo.

Sopravvive



Icona

(@ d4z_c0nf)

3 anni, 2 mesi fa

Ciao,
Fantastico font CSS già accodato dal tema per quanto riguarda l’opzione i
Aspetto -> Personalizza -> Opzioni avanzate -> Icone front-end (Awesome Font) -> Carica Font Font grandi risorse

attivo.
E sul tuo sito lo è.

Il fatto è che Font Awesome 5 ha cambiato il modo in cui è definito CSS, quindi è necessario modificare il CSS personalizzato per farlo funzionare con l’ultima versione di FA.
In particolare, nel codice sopra:

/* Add a magnifying glass in front of search box*/
.my-nav-menu-search .search-form:before {
font-family: 'FontAwesome';
content: 'f002';
position: absolute;
font-size: 19px;
font-weight: normal;
top: 5px;
left: 5px;
}

Questo: font-family: 'FontAwesome';

Deve essere: font-family: 'FontAwesome 5 Free';

e spessore del carattere: font-weight: normal;

Deve essere: font-weight: 900;

perché l’icona di ricerca in Font Awesome 5 (gratuito) è solo nel formato Solid, che viene fatto con quel peso del carattere.
https://fontawesome.com/icons/search?style=solid

Spero che possa aiutare.

Questa risposta è stata modificata 3 anni, 2 mesi fa da. Lanciatore di thread

(@taryarlwin)

3 anni, 2 mesi fa

Grazie per il tuo aiuto Rocco. Ma ancora non potevano vedere l’icona di ricerca. Non ho idea di dove sia andato storto. Prova già a svuotare la cache e naviga anche.

Controlla il risultato qui: https://demo.tdstech.com/

Codice editoriale:
/ * Posiziona una lente di ingrandimento davanti alla casella di ricerca * /
.my-nav-menu-search .search-form: before {
famiglia di caratteri: “FontAwesome 5 Free”;
oggetto: ” f002″;
posizione: assoluta;
dimensione del carattere: 19px;
spessore del carattere: 900;
in alto: 5px;
sinistra: 5px;
}

(@denzel_chia)

3 anni, 2 mesi fa

Ciao,

Utilizzare quanto segue per una famiglia di caratteri

font-family:'Font Awesome 5 Free';

Posso farlo funzionare sul tuo sito Web, implementandolo tramite i miei strumenti di sviluppo.
https://i.imgur.com/hhRSODA.png

Grazie

Lanciatore di thread

(@taryarlwin)

3 anni, 2 mesi fa

Grande! Funziona come un incantesimo. Grazie Denzel e Rocco.

Questa risposta è stata modificata 3 anni, 2 mesi fa da.

(@ d4z_c0nf)

3 anni, 2 mesi fa

Giusto,
grazie Denzel.
Errore mio, no
font-family: 'FontAwesome 5 Free';

ma
font-family: 'Font Awesome 5 Free'; (Ho perso spazio: /)
o
font-family: 'Font Awesome 5 Free'; (come ha detto Denzel)

😀

(@denzel_chia)

3 anni, 1 mese fa

Ciao,

Sono felice di darmi un aiuto. 🙂
Grazie!

(@unwirklich)

3 anni, 1 mese fa

Ho la stessa domanda su due siti (utilizzando lo stesso codice)
lifewithgremlins.com e Ketosee.com


/* Add a magnifying glass in front of search box*/
.my-nav-menu-search .search-form:before {
font-family: 'Font Awesome 5 Free';
content: 'f002';
position: absolute;
font-size: 19px;
font-weight: 900;
top: 5px;
left: 5px;
}

Ho ricontrollato e Font Awesome è abilitato nelle impostazioni avanzate. Dove sto sbagliando?

Questa risposta è stata modificata 3 anni, un mese fa da. Questa risposta è stata modificata 3 anni, un mese fa da. Questa risposta è stata modificata 3 anni, un mese fa da.

(@unwirklich)

3 anni fa

Ho pensato casualmente di provare il modo “Font Awesome 5 Free” invece di “Font Awesome 5 Free” e funziona … il che è strano, prima che mi permettesse di salvare senza anche se non ricordo cosa diceva l’errore . In ogni caso, il problema 🙂 è stato risolto

Was this helpful?

0 / 0

Lascia un commento 0

Your email address will not be published. Required fields are marked *