Sicuramente potevo utilizzare un’immagine “.png” , ma avrei dovuto impiegarci più tempo per adattare la dimensione su ogni dispositivo. Quindi come quasi tutti gli sviluppatori che utilizzano le icone, ho deciso di crearla con una libreria e precisamente ho utilizzato “Fontawesome“.

Cosa è Font Awesome ?

Font Awesome è una delle tante librerie per sviluppatori che mette a disposizione le icone in codice, che prendono forma grazie al file di stile “CSS” che il sito rilascia tramite link (CDN).

Molte di queste librerie hanno icone che si possono utilizzare con un piano Free, quindi basta semplicemente registrarsi e includere il link della CDN rilasciato, altre invece hanno un piano PRO (a pagamento e con CDN a parte).

Non preoccuparti perché l’icona di Instagram rientra nel piano Free .

Quindi per iniziare come primo step, installiamo la libreria! Niente di più facile, copiamo la CDN e inseriamola nell’ “head” del nostro progetto con il tag “link”. Per semplificarti il tutto ti condivido qui la CDN da inserire direttamente nell’ “head”, in questa maniera potrai anche non registrarti sul sito.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

Adesso potrai copiare il codice di ogni icona free del sito FA (Font Awesome) e incollarla nel tuo progetto, il risultato sarà appunto l’icona visualizzabile (quella che avrai scelto ). Se dovessi prendere un’icona pro invece, non essendo inclusa nella CDN, non verrà visualizzata sul sito web.

Posso installare Font Awesome su WordPress ?

Certo, come al solito è tutto più rapido, ti basta installare il plugin FontAwesome  e poi inserire il codice nell’HTML del tuo articolo o del Widget.

Per Sapere come utilizzare l’HTML nella pagine puoi vedere l’articolo Immagini Responsive , dove spiego come farlo .

Creiamo l’icona di Instagram con il suo vero colore

Come prima cosa, dopo aver installato la libreria sul tuo sito, cerchiamo l’icona di Instagram nella barra di ricerca del sito FA , semplicemente cercando la parola chiave (che in questo caso sarà “Instagram”).

Io ho usato questa icona:

<i class="fab fa-instagram fa-3x"></i>

Ho aggiunto la classe “fa-3x” che rende l’icona più grande. Ci sono varie misure del css di FA, e vanno da “fa-1x” a “fa-5x”, tu puoi scegliere la misura che più ti soddisfa.

Adesso non ci resta che aggiungere il nostro stile tramite CSS.

Utilizzando WordPress potrai aggiungere lo stile tramite il menù Personalizza -> CSS Personalizzato (Lo stesso menù che usi per modificare la Favicon del tuo sito) oppure installando il Plugin Simple Custom CSS and JS .

Copia e incolla questo codice all’interno del tuo CSS o del Plugin:

.insta-colore{
	color: transparent;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background: -webkit-radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  background-clip: text;
  -webkit-background-clip: text;
}

Su WordPress :

Inseriamo quindi la classe che abbiamo istanziato con il nome di  “insta-colore” all’interno dell’icona di Font Awesome, quindi il risultato finale nell’ HTML sarà :

<i class="fab fa-instagram fa-3x insta-colore"></i>

Adesso dovresti vedere la tua icona di Instagram con lo stesso colore e sfumature di quella originale.

È stato utile questo articolo ?

Lasciami un commento per qualsiasi domanda o per qualche osservazione

L'articolo Colore icona Instagram Font Awesome proviene da Alessandro Albergo.

Cosa è la Favicon di un sito web ?

La Favicon, è quel logo che vedi sulla tab del tuo browser quando navighi su un sito web :

Perchè dovresti averne una ?

Perchè le favicon non sono direttamente responsabili dell’ottimizzazione dei motori di ricerca; tuttavia sono indirettamente responsabili perché sono uno strumento importante per migliorare il posizionamento sui motori di ricerca. Una favicon ( icona ) ti offre un vantaggio rispetto ad un sito web che non ne utilizza una.

Quindi ora che abbiamo capito l’importanza, vediamo subito come procedere per poterne creare una in maniere semplice:

Come primo passo, procurati il tuo logo, e ridimensionalo con le dimensioni 32×32 px (dimensione consigliata ).

Ora inserisci la favicon  “logo.png” (il nome non è importante) in una nuova cartella (che chiameremo IMG per convenzione) all’interno del progetto del tuo sito.

Adesso andiamo ad inserire nel tag “<head></head>” del tuo sito (che di solito è la prima parte che dovresti trovare nel codice ) la seguente stringa:

<link rel="icon" type="image/png" href="/IMG/logo.png">

Bene adesso ricaricando la pagina dovresti vedere la tua icona su ogni tab che raffiguri il tuo sito web.

Invece come inserisco la Favicon per il sito web in WordPress ?

Niente di più facile! Andiamo sul nostro sito in WordPress , effettuiamo l’accesso e cliccando personalizza, vedremo la voce denominazione del sito all’interno del menù, che ci permetterà di impostare la nostra favicon .

Ora non ti resta che caricare il logo da te creato e ridimensionarlo nel passaggio successivo (se dovesse esserci il bisogno) con WordPress .

Come vedi per WordPress è davvero molto facile! Ora potrai impostare la tua icona personalizzata sul tuo sito web!

È stato utile l’articolo?

Lasciamo un commento per farmelo sapere

L'articolo Aggiungere Favicon (icona – logo) sul sito web proviene da Alessandro Albergo.