Comment ajouter des icônes bootstrap en HTML et CSS

Bootstrap est un cadre open source qui améliore la réactivité des pages Web. Les icônes bootstrap peuvent être utilisées dans un document HTML et CSS peut être appliqué pour ajouter diverses propriétés à ces icônes. Bootstrap prend en charge une longue liste d'icônes dans plusieurs formats tels que SVG, Web-Font, SVG Sprite. Cet article vous guide pour ajouter des icônes bootstrap en HTML et CSS.

Comment ajouter des icônes bootstrap en HTML et CSS

Les icônes bootstrap peuvent être ajoutées dans HTML et CSS en utilisant le lien CDN de Bootstrap-Icons. Cette section décrira les deux méthodes pour ajouter des icônes bootstrap en HTML et CSS.

Comment ajouter des icônes bootstrap en utilisant le lien CDN

Le lien CDN (contenu de livraison / réseau de distribution) permet d'ajouter très facilement les bibliothèques CSS, JS et JQuery. Par Dadding Le lien CDN de Bootstrap-Icons, vous n'avez pas besoin de télécharger et d'intégrer les icônes bootstrap avec HTML. Les étapes à venir vous amèneront à ajouter des liens CDN suivis par l'ajout d'icônes bootstrap.

Étape 1: Ajoutez le lien CDN des icônes bootstrap

Bootstrap5 est la dernière version du bootstrap, donc pour ajouter le lien CDN de Bootstrap-Icons, copiez / collez le lien suivant dans la balise.

Étape 2: Ajout d'icônes bootstrap

Pour ajouter des icônes bootstrap, vous devez utiliser la syntaxe suivante.

Dans la syntaxe ci-dessus, le nom de bi-class représente le nom de classe des icônes telles que Bi-Search, Bi-Calendar, Bi-Facebook, etc.,

Exemple

Cet exemple utilise la classe d'icônes Bootstrap pour imprimer l'icône de LinkedIn et le coup de pouce.

LinkedIn-Icon:

Thumbsup-icon:

Deux paragraphes sont créés qui impriment l'icône LinkedIn et l'icône Up Up en utilisant liaison biologique et bifots-thumbs-up-fill classes de bootstrap-icons.

Sortir

La sortie montre que l'icône LinkedIn et l'icône de Thumbs-Up ont été intégrées avec succès dans le document HTML.

Conclusion

Les icônes bootstrap peuvent être ajoutées à HTML et CSS en utilisant le lien CDN des icônes par défaut. La prise en charge des icônes par défaut est fournie par Bootstrap elle-même et vous devez ajouter le lien CDN des icônes bootstrap dans votre document HTML. Ce message descriptif qui vous permettra d'ajouter des icônes bootstrap dans HTML et CSS. De plus, vous apprendrez également à mettre en place un environnement de Bootstrap-Icons avec HTML et CSS.