Come aggiungere ioniconi in HTML e CSS

Esprimere i tuoi pensieri in parole può essere un po 'difficile processo e lunghi dettagli su tutto ciò che potrebbe non mancare l'attenzione dell'utente, quindi, inserire le icone su un sito Web anziché il testo può essere un approccio migliore. Le icone sono diventate una parte essenziale di qualsiasi sito Web perché l'uso corretto delle icone può esprimere il messaggio esatto in forma visiva.

Per incorporare le icone in un sito Web sono disponibili più set di icone, uno dei più significativi tra questi è Ioniconi. IL Inoiconi sono liberamente disponibili per tutti e possono fornire risultati efficaci per tutte le principali piattaforme come iOS, desktop, ecc.

Questo articolo presenterà una comprensione dettagliata di come usare Ioniconi In HTML e a questo proposito dobbiamo seguire i seguenti concetti:

• Cosa sono ioniconi
• Come usare ioniconi
• Stili ioniconi

Iniziamo

Cosa sono ioniconi

È un set di icone liberamente accessibile che fornisce più di settecento icone per quasi tutte le piattaforme come Android, Web, Desktop, ecc.

Come usare ioniconi

Per utilizzare ioniconi, seguire la guida passo-passo fornita di seguito:

Primo passo

Per aggiungere ioniconi su un sito Web, la prima cosa che devi fare è aprire un browser Web e cercare il "Ionicons":

Facendo clic su Ioniconi ti porterà alla pagina seguente:

Oppure fai clic qui per visitare il sito ufficiale di Ionicons.

Secondo passo

Successivamente, devi fare clic su utilizzo Opzione come menzionato nella figura seguente:

Facendo clic su "Utilizzo" L'opzione aprirà una nuova pagina:

Terzo passo

Scorri un po 'verso il basso e troverai un "installazione" sezione. All'interno dell'opzione di installazione, troverai un paio di script:

Copia entrambi gli script e incollali vicino al tag del corpo di chiusura del tuo documento HTML o nel tag principale della tua pagina web:

Quarto passo

Ora possiamo caricare gli ioniconi nel nostro documento HTML. Per farlo, torna al "Utilizzo" scheda e scorrere un po 'verso il basso per trovare il "Uso di base" sezione per capire come utilizzare il componente Ionicon:

Quinto passo

Ora, torna al "Icone" Scheda e cerca l'icona di tua scelta:

Facendo clic sull'icona mostrerà il codice del componente:

Sesto passo

Copia il codice e incollalo nel tuo documento HTML:

Il seguente sarà l'output per lo snippet sopra dato:

L'output verifica che "Ionicons " L'icona Home viene aggiunta correttamente alla nostra pagina HTML. In questo modo, puoi inserire altrettanto Ioniconi come vuoi.

Stili ioniconi

È possibile selezionare le icone da tre diversi stili come mostrato nello snippet di seguito:

Esempio

Questo esempio utilizzerà una casa ioniconi di tutti e tre gli stili:

Ionicons in HTML

Lo snippet di cui sopra produce la seguente uscita:

L'output mostra come lo appaia di contorno, riempito e affilato. Tra questi stili i.e. contorno, pieno, affilato, puoi scegliere qualsiasi stile adatto alle tue esigenze.

Conclusione

Incorporare un ionicon in html tutto ciò che devi fare è copiare gli script dalla sezione di installazione degli ioniconi e incollarli nel documento HTML. Successivamente, seleziona Ionicon di tua scelta, copia il codice componente e incollalo nel documento HTML. Questo articolo fornisce una comprensione dettagliata di cosa sono ioniconi e come implementare/utilizzare ioniconi in HTML. Gli screenshot sono forniti con ogni passaggio per una comprensione approfondita dei concetti.