come aggiungere le icone dei social media in wordpress senza plugin

Vuoi aggiungere le icone dei social media al tuo sito WordPress senza un plug-in?

Ci sono un sacco di post che mostrano come aggiungere icone usando i caratteri fantastici, ma ti mostrerò un modo molto più semplice senza dover aggiungere icone esterne.

Se sei una persona che prende sul serio la velocità della pagina, lo adorerai.

Dashicon è il carattere dell'icona ufficiale di WordPress. Appaiono nella barra laterale sinistra di ogni back-end di amministrazione del sito WordPress.

come aggiungere le icone dei social media in wordpress senza plugin

Useremo queste icone invece di icone esterne. Ciò libererà il browser dalla richiesta di file aggiuntivi.

Segui questi passaggi:

Passo 1

Aggiungi il widget HTML personalizzato nella barra laterale o nel piè di pagina. Puoi gestire i widget in Dashboard >>> Aspetto >>> Widget.

Passo 2

Incolla questo codice nella casella del contenuto


In questo codice vengono visualizzate solo le icone di Facebook e Twitter.
Per aggiungere più icone, dovrai personalizzare tre parti al suo interno.

href è il collegamento alla tua pagina social
aria-label è un testo che descrive il collegamento

La terza e la più importante è la classe = "dashicons dashicons-facebook-alt"

Ogni carattere in Dashicon ha una classe specifica che viene utilizzata per visualizzare l'icona. Possiamo trovare la classe di un'icona facendo clic su di essa

come aggiungere le icone dei social media in wordpress senza plugin

Sostituisci questa parte con quella che desideri utilizzare

Ad esempio, sostituisci dashicons-facebook-alt con dashicon-cuore e verrà visualizzata l'icona del cuore.

Passaggio 3.

Aggiungi questo CSS nel file Style.css dei temi secondari o nell'opzione CSS aggiuntiva di Customizer

.social-link-container {display: flex; } .social-link-container .social-link {padding: 3px; margin-right: 10px; } .dashicons {font-size: 30px; colore: #fff; larghezza: 40px; altezza: 40px; raggio del bordo: 50%; display: flex; giustificare-contenuto: centro; elementi di allineamento: centro; }

Questo codice sopra aggiungerà tutti gli attributi delle icone tranne il colore. Usa il codice sottostante per aggiungere colore alle icone che saranno visibili solo allora.

.dashicons-facebook-alt {background: # 1877F2; } .dashicons-twitter {background: # 1DA1F2; }

Se aggiungi più icone, puoi aggiungere un colore di sfondo diverso a ciascuna icona utilizzando la sua classe e il CSS sopra.

Vuoi aggiungere un semplice effetto hover? Aggiungilo al tuo CSS se vuoi mostrare un effetto al passaggio del mouse "Crescita in"

.dashicons: hover {-webkit-transform: scale (1.2); -ms-transform: scale (1.2); trasformare: scala (1.2); }

Questo è tutto! Ora svuota la cache del sito web e controlla il tuo widget, verrà visualizzato in questo modo

come aggiungere le icone dei social media in wordpress senza plugin

Se segui esattamente i passaggi, lo farai funzionare.
In caso contrario, commenta di seguito e posso aiutarti a risolverlo.

Lascia un commento