Le icone di piume sono una raccolta di caratteri che possono essere utilizzati in applicazioni e siti Web. Offre icone grafiche vettoriali scalabili che sono altamente personalizzabili in termini di ombra, colore, dimensioni e qualsiasi altra proprietà che CSS può gestire. Gli sviluppatori e i designer che lavorano su varie piattaforme possono scaricare la raccolta di icone di carattere piuma e utilizzarlo in base alle loro preferenze.

Questo articolo discuterà del metodo a Usa icone di piume In Html E CSS. Inoltre, verranno forniti esempi relativi alla procedura specificata. Quindi iniziamo!

Nota: Prima di spostarsi verso, assicurati di aver installato icone di piume. Se non lo hai già, segui la sezione di seguito.

Come installare icone di piume

Esistono vari metodi per l'installazione di icone di piume; Tuttavia, abbiamo compilato il più semplice per incorporare le icone di piume in HTML e CSS senza problemi.

Metodo 1: installazione di icone di piume usando CDN

Rete di consegna dei contenuti (CDN) fornisce l'accesso ai file JavaScript utilizzati da persone di tutto il mondo. È possibile utilizzare uno dei seguenti collegamenti per l'aggiunta di icone di piuma al tuo file HTML:

O

Metodo 2: installazione di icone di piume usando la libreria NPM

"piuma-icons"È una libreria NPM utilizzata per integrare il carattere di piuma in qualsiasi applicazione JavaScript. Se si desidera installare icone di piume usando la libreria NPM, è necessario eseguire questo comando nel terminale:

NPM Installa piuma -icons -Save

Metodo 3: installazione di icone di piume scaricando la sua collezione

Prima di tutto, scarica la cartella zippata delle icone della piuma e poi copia il “font/" E "CSS/"Directory al tuo progetto. Quindi, spostati sul tuo file HTML e specifica il percorso di "Feathericon.min.CSSFile nel ""Tag:

Come usare le icone di piume in HTML e CSS

Per dimostrare la procedura di utilizzo di icone di piuma in HTML e CSS, creeremo un nuovo file HTML chiamato "il mio file.html"Nel codice Visual Studio:

In "il mio file.html"File, in primo luogo, aggiungeremo il collegamento del pacchetto Icon Feather come fonte, all'interno del""Tag:

Quindi, specificheremo le icone usando "piuma di dati"Valore dell'attributo in etichetta. Puoi vedere dal codice dato, stiamo usando "stella","piazza","campana", E "premio"Icone di piume nel file HTML:

Stiamo usando icone di piume in HTML e CSS

Infine, invoceremo la piuma.Sostituisci () metodo per sostituire gli elementi DOM con le icone della piuma aggiunta:

Ecco come appare il codice completo nel nostro "il mio file.html":

Apri il file nel browser e controlla le icone della piuma che abbiamo usato nel “il mio file.html" file:

A questo punto, hai impostato il layout di base delle icone della piuma nel file HTML. Quindi, ora, se vuoi personalizzare lo stile delle icone della piuma, puoi eseguire questa operazione con l'aiuto di CSS.

Nel nostro "stile.CSS"File, definiremo tre classi per impostare le dimensioni delle icone della piuma:

.Feather-10
larghezza: 10px;
Altezza: 10px;

.Feather-24
larghezza: 24px;
Altezza: 24px;

.Feather-48
larghezza: 48px;
Altezza: 48px;

Per applicare queste impostazioni a un'icona di piuma, è necessario menzionare la classe CSS richiesta nel modo seguente:

Salva ancora una volta il tuo file HTML, aprilo al tuo browser preferito e nota la differenza nello stile delle icone di piuma:

Questo riguardava l'uso di base delle icone di piume in HTML e CSS. Per esplorare ulteriormente, controlla la documentazione delle icone della piuma.

Conclusione

Per utilizzare le icone di piume in HTML e CSS, è necessario installarle prima utilizzando CDN, libreria NPM o scaricando i suoi file correlati dal sito Web ufficiale. Dopo aver installato icone di piume, puoi integrare la sua bellissima collezione di icone e modellarle secondo le tue preferenze usando CSS. Questo articolo ha discusso del metodo per utilizzare le icone di piume in HTML e CSS. Inoltre, vengono forniti anche esempi relativi alla procedura specificata.