Come aggiungere icone bootstrap in HTML e CSS
Come aggiungere icone bootstrap in HTML e CSS
Le icone bootstrap possono essere aggiunte in HTML e CSS utilizzando il collegamento CDN di bootstrap-icons. Questa sezione descriverà entrambi i metodi per aggiungere icone bootstrap in HTML e CSS.
Come aggiungere icone bootstrap usando il collegamento CDN
Il collegamento CDN (Content Delivery/Distribution Network) consente di aggiungere molto facilmente le librerie CSS, JS e JQuery. Papà il link CDN di bootstrap-icons, non è necessario scaricare e integrare le icone bootstrap con HTML. I prossimi passaggi ti porteranno ad aggiungere collegamenti CDN seguiti dall'aggiunta di icone bootstrap.
Passaggio 1: aggiungi il collegamento CDN delle icone bootstrap
Bootstrap5 è l'ultima versione di bootstrap, quindi per aggiungere il collegamento CDN di bootstrap-icons, copiare/incollare il seguente link nel tag.
Passaggio 2: aggiunta di icone Bootstrap
Per aggiungere icone bootstrap, è necessario utilizzare la seguente sintassi.
Nella sintassi sopra, il Bi-ClassName Rappresenta il nome della classe delle icone come Bi-Search, Bi-Calendar, Bi-Facebook, ecc.,
Esempio
Questo esempio utilizza la classe icons bootstrap per stampare l'icona di LinkedIn e pollice in su.
LinkedIn-icon:
Thumbsup-icon:
Vengono creati due paragrafi che stampano l'icona LinkedIn e l'icona del pollice utilizzando Bi-Linkedin E Bi-man-thumbs-up-fill Classi di bootstrap-icons.
Produzione
L'output mostra che l'icona di LinkedIn e l'icona del pollice è stata integrata in modo contrario nel documento HTML.
Conclusione
Le icone bootstrap possono essere aggiunte a HTML e CSS utilizzando il collegamento CDN delle icone predefinite. Il supporto icone predefinito è fornito dallo stesso bootstrap e devi aggiungere il collegamento CDN delle icone bootstrap nel documento HTML. Questo post descrittivo che ti consentirà di aggiungere icone bootstrap in HTML e CSS. Inoltre, impareresti anche a creare un ambiente di bootstrap-icons con HTML e CSS.