pinterest linkedin behance copy
Bootstrap Icons
Nouveau dans v1.8.0: 140+ nouvelles icones!

Icones Bootstrap

Bibliothèque d'icônes gratuite, de haute qualité et open source avec plus de 1 600 icônes. Incluez-les comme bon vous semble : SVG, sprite SVG ou polices Web. Utilisez-les avec ou sans Bootstrap dans n'importe quel projet.

npm i bootstrap-icons

Actuellement v1.8.1 • Icones • Installation • Utilisation • Style • Accessibilité • Dépôt GitHub

Icones

Installer

Les icônes Bootstrap sont publiées sur npm, mais elles peuvent également être téléchargées manuellement si nécessaire.

npm

Installez les icones y compris les SVG, les sprites d'icônes et les polices d'icônes, avec npm. Ensuite, choisissez comment vous souhaitez inclure les icônes avec les instructions d'utilisation.

npm i bootstrap-icons

Télécharger

Les versions sont publiées sur GitHub et incluent des icônes SVG, des polices, une licence et un fichier Lisez-moi. Notre package.json est également inclus, bien que nos scripts npm soient principalement disponibles pour nos workflows de développement.

Télécharger le dernier ZIP

CDN

Incluez la feuille de style des polices d'icônes - dans votre site Web <head> ou par @import CSS - à partir de notre CDN et démarrez en quelques secondes. Voir la documentation sur les polices d'icônes pour des exemples.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css");

Utilisation

Les icônes Bootstrap sont des SVG, vous pouvez donc les inclure dans votre code HTML de plusieurs manières en fonction de la configuration de votre projet. Nous vous recommandons d'utiliser un width: 1em (et éventuellement height: 1em) pour un redimensionnement facile via font-size.

Embarqué

Intégrez vos icônes dans le code HTML de votre page (par opposition à un fichier image externe). Ici, nous avons utilisé un personnalisé width et height. 

<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/></svg>

Sprite

Utilisez le sprite SVG pour insérer n'importe quelle icône dans l' <use> élément. Utilisez le nom de fichier de l'icône comme identifiant de fragment (par exemple, toggles est #toggles). Les sprites SVG vous permettent de référencer un fichier externe similaire à un <img> élément, mais avec la puissance de currentColor pour une thématisation facile.

Attention! Il y a un problème avec Chrome car <use> fonctionne pas sur plusieurs domaines.

<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="currentColor">
  <use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

Image externe

Copiez les SVG Bootstrap Icons dans le répertoire de votre choix et référencez-les comme des images normales avec l' <img> élément.

Bootstrap
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" width="32" height="32">

Police d'icône

Les polices d'icônes avec des classes pour chaque icône sont également incluses pour les icônes Bootstrap. Incluez les polices Web d'icônes dans votre page via CSS, puis référencez les noms de classe selon vos besoins dans votre code HTML (par exemple, <i class="bi-alarm-clock"></i>).

Utilisez font-size et color pour changer l'apparence de l'icône.

<i class="bi-alarm"></i>
<i class="bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

CSS

Vous pouvez également utiliser le SVG dans votre CSS ( assurez-vous d'échapper tous les caractères , par exemple lorsque # vous %23 spécifiez des valeurs de couleur hexadécimales). Lorsqu'aucune dimension n'est spécifiée via width et height sur le <svg>, l'icône remplira l'espace disponible.

L' viewBox attribut est obligatoire si vous souhaitez redimensionner les icônes avec background-size. Notez que l' xmlnsattribut est obligatoire.

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
}

Style

La couleur peut être modifiée en définissant une .text-* classe ou un CSS personnalisé : 

<svg class="bi bi-exclamation-triangle text-success" width="32" height="32" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
  ...
</svg>

Accessibilité

Pour les icônes purement décoratives, ajoutez aria-hidden="true". Sinon, fournissez une alternative textuelle appropriée. Selon la méthode que vous utilisez pour ajouter les icônes et l'endroit où vous les utilisez (par exemple, en tant qu'images autonomes ou en tant que seul contenu d'un bouton ou d'un contrôle similaire), il existe différentes approches possibles. Voici quelques exemples:

Bootstrap 
<!-- alt="..." on <img> element -->
<img src="/assets/img/bootstrap.svg" alt="Bootstrap" ...>
<i class="bi-github" role="img" aria-label="GitHub"></i>
<svg class="bi" ... role="img" aria-label="Tools">
  <use xlink:href="bootstrap-icons.svg#tools"/>
</svg>
<!-- aria-label="..." on the control -->
<button ... aria-label="Mute">
  <svg class="bi bi-volume-mute-fill" aria-hidden="true" ...>
  ...
  </svg>
</button>

Travailler avec des SVG

Les SVG sont géniaux à utiliser, mais ils ont quelques bizarreries connues à contourner. Étant donné les nombreuses façons dont les SVG peuvent être utilisés, nous n'avons pas inclus ces attributs et solutions de contournement dans notre code.

Les problèmes connus incluent :

  • Les SVG reçoivent le focus par défaut dans Internet Explorer et Edge Legacy. Lors de l'intégration de vos SVG, ajoutez focusable="false" -les à l' <svg> élément. En savoir plus sur Stack Overflow.

  • Lors de l'utilisation de SVG avec <img> des éléments, les lecteurs d'écran peuvent ne pas les annoncer comme des images ou ignorer complètement l'image. Inclure un élément supplémentaire role="img" sur l' <img> élément pour éviter tout problème. Voir cet article pour plus de détails.

  • Les sprites SVG externes peuvent ne pas fonctionner correctement dans Internet Explorer. Utilisez le polyfill svg4everybody au besoin.

Vous avez trouvé un autre problème avec les SVG que nous devrions noter ? Veuillez ouvrir un problème pour partager les détails.

© 2010-2024 QZYcodes by Quazerty.