TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come utilizzare le fantastiche icone dei caratteri in Weebly?

21

Le icone fantastiche dei caratteri sono icone vettoriali scalabili originariamente sviluppate per essere utilizzate con il framework Bootstrap e successivamente rese disponibili per gli altri. Come indica il nome, le icone di Font Awesome sono semplicemente fantastiche da usare ovunque sul tuo sito per molteplici scopi. Le icone sono scalabili, il che significa che puoi utilizzare la stessa icona in dimensioni diverse senza perdere la qualità del display. In questo momento Weebly offre qualsiasi opzione predefinita per aggiungere i caratteri delle icone agli elementi del tuo sito. In questo articolo discuteremo perché e come utilizzare le fantastiche icone dei caratteri nel sito Weebly.

Perché dovresti considerare l’utilizzo delle icone dei caratteri?

Ci sono diversi motivi per cui dovresti considerare l’utilizzo delle icone dei caratteri:

  • Le icone possono essere utilizzate gratuitamente per usi personali e commerciali.
  • Non hai bisogno di immagini e JavaScript per creare un’icona che migliora il tempo di caricamento del sito.
  • L’aspetto dell’icona può essere completamente personalizzato con i CSS.
  • È possibile utilizzare icone di diverse dimensioni con una risoluzione perfetta.
  • Altamente attraente su dispositivi con display retina.

Potresti vedere l’uso di icone di caratteri su altre piattaforme come WordPress e ti chiedi come sia possibile farlo sul sito Weebly.

Come utilizzare le fantastiche icone dei caratteri in Weebly?

Sebbene ci siano molti modi per utilizzare le fantastiche icone dei caratteri, spiegheremo due semplici metodi:

  • Utilizzo di Bootstrap CDN da qualsiasi servizio CDN come MaxCDN
  • Hosting di fantastiche icone di caratteri sul tuo sito

Utilizzo di Bootstrap CDN

Questo è il modo più semplice, affidabile e facile per utilizzare icone fantastiche di caratteri sul tuo sito senza problemi. Devi semplicemente collegare il seguente foglio di stile nella sezione dell’intestazione della tua pagina o del tuo sito.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Ti consigliamo di collegare il foglio di stile nella sezione dell’intestazione di qualsiasi pagina nella scheda "Pagine" prima di distribuirlo sul sito live. È possibile creare una pagina di prova nascosta dai motori di ricerca o creare un sito di prova e collegare il foglio di stile nella sezione dell’intestazione sotto Scheda "Impostazioni" Nota che le fantastiche icone dei caratteri funzioneranno su un sito Weebly gratuito e non sono necessari piani premium per questo scopo.

Hosting sul tuo sito

Invece di usare Bootstrap CDN CSS, puoi anche scaricare i file di font completi e CSS dalla home page del sito fantastico di font su Github. Carica le intere cartelle nel tuo sito Weebly modificando l’HTML/CSS sorgente. Assicurati di caricare tutti i tipi di caratteri e file CSS come mostrato nell’immagine qui sotto:

Come utilizzare le fantastiche icone dei caratteri in Weebly?

Carica file fantastici di caratteri in Weebly

Collega il file CSS alla sezione di intestazione della pagina richiesta o a livello di sito.

<link rel="stylesheet" href="http://yoursite.weebly.com/files/theme/font-awesome.min.css">

Puoi utilizzare un file .css o un file .min.css. La versione ridotta è consigliata nel sito live poiché migliora il tempo di caricamento del sito.

Esempi di utilizzo delle icone dei caratteri

Una volta deciso se caricare i fogli di stile e i caratteri o utilizzare il CSS CDN, il passaggio successivo è utilizzarlo nella pagina utilizzando l’elemento "Codice da incorporare".

Facciamo un esempio dell’aggiunta di un’icona a forma di ingranaggio sulla tua pagina, il formato per l’aggiunta di un’icona di carattere impressionante è semplice come di seguito:

<i class="fa fa-phone-square"></i> This is a font awesome phone icon.

La sintassi contiene tre parti:

  • … – ogni icona deve essere utilizzata all’interno del tag.
  • fa – carattere fantastico prefisso di classe CSS.
  • fa-phone-square – nome dell’icona attuale.

L’output del codice sopra incollato all’interno dell’elemento "Embed Code" sarà come di seguito:

Come utilizzare le fantastiche icone dei caratteri in Weebly?

Font Awesome Icon Esempio in Weebly

Aumentare le dimensioni dell’icona

Ci sono cinque classi CSS per aumentare la dimensione dell’icona come di seguito:

<i class="fa fa-phone-square fa-lg"></i> Increases the icon size by 33% <i class="fa fa-phone-square fa-2x"></i> Increases the icon size by 2x <i class="fa fa-phone-square fa-3x"></i> Increases the icon size by 3x <i class="fa fa-phone-square fa-4x"></i> Increases the icon size by 4x <i class="fa fa-phone-square fa-5x"></i> Increases the icon size by 5x

Personalizzazioni illimitate

Una volta che hai imparato a usare le icone dei caratteri, ci sono molti modi utili in cui possono essere utilizzate su un sito. Ad esempio, puoi aggiungere un elenco come di seguito:

<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List item 1</li> <li><i class="fa-li fa fa-check-square"></i>List item 2</li> <li><i class="fa-li fa fa-check-square"></i>List item 3</li> <li><i class="fa-li fa fa-check-square"></i>List item 4</li> </ul>

L’elenco piacerà di seguito:

Come utilizzare le fantastiche icone dei caratteri in Weebly?

Elenco delle icone dei caratteri

Puoi fare riferimento agli esempi per verificare quanto sia facile aggiungere molte funzionalità al tuo sito con le icone dei caratteri. Fare riferimento anche al cheat sheet per ottenere rapidamente i nomi delle icone. Puoi anche usare Unicode invece del nome dell’icona. Ad esempio, nell’esempio sopra dell’icona elenco invece di usare il nome dell’icona fa-check-square puoi usare il suo valore Unicode equivalente .

Fonte di registrazione: www.webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More