Come aggiungere icone su WordPress?

Come aggiungere icone su WordPress? Scopriamo insieme come fare, esistono più modi, scegli quello che preferisci.

Perché utilizzare le icone?

I caratteri icona sono dei caratteri tipografici che contengono simboli e pittogrammi invece di contenere determinate lettere e simboli.

Questo tipo di carattere può essere utilizzato per visualizzare icone di uso comune sotto forma di miniature, è molto intuitivo ed è perfetto per creare pulsanti.

Alcuni esempi di caratteri icona che puoi trovare su quasi tutti i siti Web o blog sono i pulsanti dei social media.

Tuttavia, poiché le immagini non sono scalabili e non rispondono, l’icona sotto forma di immagine può rallentare il tempo di caricamento del tuo sito e questo è fastidioso per i visitatori del sito web.

Quindi, il carattere dell’icona è un’alternativa che può funzionare su vari dispositivi ed è anche leggero come formato, pur essendo un svg.
Ciò che rende l’icona più leggera da caricare è l’icona sotto forma di immagine vettoriale. Pertanto, l’icona è molto facile da personalizzare.

I caratteri hanno il vantaggio di rendere i design più reattivi perché puoi manipolare i caratteri delle icone in base alle tue esigenze. Esistono molte opzioni di personalizzazione come la modifica delle dimensioni e del colore dell’icona, la rotazione dell’icona, l’aggiunta di effetti e così via. Tutto può essere fatto facilmente tramite CSS senza perdere la qualità visiva.

Dashicon

Oltre ai caratteri icona open source disponibili su Internet, WordPress ha in realtà Dashicons, un pacchetto di caratteri icona predefiniti incorporati per ogni sito WordPress. Questi trattini sono stati introdotti in WordPress 3.8.

Dashicons fornisce font di icone, a partire dal menu di amministrazione, schermata di benvenuto, formati di post, media, modifica delle immagini, TinyMCE, schermate di pubblicazione, ordinamento, social media, prodotti, tassonomie, widget, notifiche, in particolare WordPress.org e molti altri.

Queste icone possono essere utilizzate per personalizzare i tuoi plugin, temi, icone del tipo di post e altri elementi sul tuo sito. Poiché è integrato nel tuo WordPress, è davvero facile da usare. Puoi farlo aggiungendo codice al file functions.php, farlo manualmente richiederà del tempo.

Invece, puoi semplicemente utilizzare un plug-in gratuito come Code Snippets per configurare Dashicons senza dover configurare il file functions.php.

Con ciò, puoi andare sul sito Web di Dashicons e scegliere quello che desideri utilizzare. Per integrarlo nel tuo sito Web, puoi fare clic sul collegamento “Copia HTML” e otterrai il codice: copialo e incollalo negli elementi di WordPress.

Esistono anche altri plug-in per citarne uno: Block Visibility.

Plug-in Block Visibility

È stato ispirato a creare Icon Blocks dopo aver messo insieme una pagina dei prezzi per Block Visibility. Ha un lungo elenco di funzionalità e codifica manualmente le icone in blocchi HTML per accompagnarle.

Screenshot della tabella dei prezzi della pagina Block Visibility. L’elenco delle funzioni si trova sul lato sinistro dello schermo. Un segno di spunta e un’icona “x” si trovano sul lato destro dello schermo.

Le icone sotto forma di caratteri sono relativamente semplici e facili da usare. Inoltre, i caratteri icona consentono anche di memorizzare vari simboli in un unico file. Ovviamente questo può ridurre il numero di richieste HTTP.

Sebbene ci siano altre opzioni per aggiungere icone, i caratteri icona sono ancora ampiamente utilizzati perché puoi trovare facilmente caratteri icona gratuiti o persino crearne di tuoi da utilizzare sul tuo sito.

Font icona WordPress gratuiti

Ci sono molti font gratuiti disponibili per il tuo sito WordPress. Puoi cercarlo facilmente, basta digitare la parola chiave “icon font” su Google. Tuttavia, consigliamo:

1. IcoFont
2. Font Awesome
3. IcoMoon
4. We Love Icon Fonts

Vediamo insieme come aggiungere un file SVG personalizzato, ad esempio utilizzando il plug-in Icon Block di WordPres.

Non si basa su librerie di terze parti come altri blocchi comparabili. Gli sviluppatori e gli amanti del fai-da-te apprezzeranno il fatto che qualsiasi file SVG può essere aggiunto facilmente all’editor. Ora vediamo insieme in modo più dettagliato Font Awesome e gli altri tre.

IcoFont

IcoFont è una delle più grandi fonti, Questa piattaforma fornisce più di 2000 icone in un font, suddivise in 30 categorie. IcoFont ti consente anche di creare pacchetti di icone personalizzati.

Se si desidera utilizzare direttamente sul Web, è possibile copiare l’intera directory IcoFont nella cartella del progetto. Assicurati di selezionare una posizione nell’intestazione per icofont.min.css.

Puoi scaricare facilmente i caratteri delle icone su questa piattaforma, copiando il codice HTML o facendo clic sul pulsante di download nella navigazione del sito.

Dopo aver scaricato con successo, otterrai un file zip contenente CSS, esempi e font. Lo snippet HTML dell’icona scaricata è raggruppato con Unicode nella cartella degli esempi.

Font Awesome

La piattaforma offre 1500 icone gratuite e più di 5000 versioni pro che includono più di 70 tipi di icone in quattro stili principali: solido, normale, leggero e di marca. Con la presenza di Font Awesome, visualizzare le icone su un sito Web o un blog è così facile che non abbiamo più bisogno di cercare immagini solo per visualizzare le icone per abbellire il nostro sito Web

Innanzitutto, è necessario installare e attivare il plug-in dell’icona di WordPress chiamato Font Awesome Integration. Dopo aver terminato l’installazione e l’attivazione, puoi aggiungere un carattere icona con il suo shortcode – [fantastico]. Ecco una spiegazione in dettaglio.
Ci sono quattro attributi nello shortcode:
obiettivi – obiettivi del tag ‘a’
href – il link da usare nel tag ‘a’
iclass – classi da usare nei tag /i/
aclass – classi da usare nel tag ‘a’
Creiamo un’icona che punti al sito web di WordPress.
Qui dobbiamo inserire il codice dell’icona – (fa-wordpres) – nel tag iclass e il link http://wordpress.com/ nel tag ahref:
[fawesome iclass=”fab fa-wordpress” ahref=”https://wordpress.com”]
Nota che in questo esempio stiamo aggiungendo il prefisso fab a iclass. Puoi personalizzarlo in base ai requisiti del tuo progetto definendo manualmente gli elementi: colore, dimensioni, ecc.

Ricorda che per fare riferimento all’icona, usiamo e usiamo per avviare il comando. Inoltre, ogni nome di icona ha un prefisso di stile. Di seguito l’ordine dei comandi:

IcoMoon

Offre più di 5.500 icone vettoriali gratuite e più di 4.000 icone premium. Puoi anche creare il tuo carattere IcoMoon e caricare il tuo file SVG utilizzando la funzione di importazione.

We Love Icon Fonts

We Love Icon Fonts è una piattaforma che ti consente di creare le tue icone con l’aiuto della funzione di creazione di font. Basta fare clic su “Aggiungi” e otterrai il codice incorporato che può essere utilizzato per personalizzare la tua raccolta di icone tramite CSS.

Aggiungere un’icona al tuo menu WordPress: AWESOME 4 MENUS

Per aggiungere un’icona senza impazzire con il codice, tutto ciò che devi fare è installare il plug-in Font Awesome 4 Menus, questo è un fantastico plug-in di icone per i menu di WordPress. Con questo plugin, aggiungi semplicemente fa (nome icona) come classe per il tuo menu e il plugin lo visualizzerà.

Vai sul sito font awesome e cerca un elenco di icone di classe che desideri visualizzare qui. Se l’hai trovato ora vai su Aspetto »Menu. Fai clic sull’opzione Schermo in alto a destra e seleziona Classi Css.

Dopo aver selezionato Classi CSS nel menu delle opzioni dello schermo, ora apri il menu a cui vuoi aggiungere un’icona, in questo esempio inserirò la classe fa fa-home nel menu principale.

Dopo aver aggiunto la classe come sopra, ora salva il menu che hai modificato e ora guarda il tuo sito wordpress, un’icona apparirà sicuramente nel menu.

Oltre a visualizzare le icone nel menu di wordpress, questo plug-in può anche visualizzare le icone nei tuoi contenuti, poiché questo plug-in ha fornito codici brevi per aggiungere icone a post e pagine. Ad esempio shortcode: [fa class=”fa-home”].

Questi erano alcuni dei modi principali per aggiungere icone su WordPress.