Bootstrap glyphicons list [Eng]
bootstrap glyphicons list pdf [Eng]
...
Comment utiliser
Pour des raisons de performances, toutes les icônes nécessitent une classe de base et une classe d'icônes individuelle. Pour l'utiliser, placez le code suivant à peu près n'importe où. Assurez-vous de laisser un espace entre l'icône et le texte pour un remplissage adéquat.
Ne pas mélanger avec d'autres composants
Les classes d'icônes ne peuvent pas être combinées directement avec d'autres composants. Ils ne doivent pas être utilisés avec d'autres classes sur le même élément. Au lieu de cela, ajoutez un imbriqué et appliquez les classes d'icônes au .
À utiliser uniquement sur des éléments vides
Les classes d'icônes ne doivent être utilisées que sur des éléments ne contenant pas de contenu textuel ni d'élément enfant.
Changer l'emplacement de la police de l'icône
Bootstrap suppose que les fichiers de polices d'icônes seront situés dans le répertoire ../fonts/, par rapport aux fichiers CSS compilés. Déplacer ou renommer ces fichiers de police signifie mettre à jour le CSS de l’une des trois manières suivantes:
- Modifiez les variables @ icon-font-path et / ou @ icon-font-name dans les fichiers source Less.
- Utilisez l'option d'URL relative fournie par le compilateur Less.
- Modifiez les chemins d'accès url () dans le CSS compilé.
Utilisez l'option qui convient le mieux à votre configuration de développement spécifique.
Icônes accessibles
Les versions modernes des technologies d'assistance annonceront le contenu généré par CSS, ainsi que des caractères Unicode spécifiques. Pour éviter une sortie involontaire et source de confusion dans les lecteurs d'écran (en particulier lorsque les icônes sont utilisées uniquement à des fins de décoration), nous les masquons avec l'attribut aria-hidden = "true".
Si vous utilisez une icône pour transmettre une signification (plutôt que comme un élément décoratif), assurez-vous que cette signification est également transmise aux technologies d'assistance - par exemple, incluez du contenu supplémentaire, masqué visuellement avec la classe .sr-only.
Si vous créez des contrôles sans autre texte (comme un ne contenant qu'une icône), vous devez toujours fournir un contenu alternatif pour identifier l'objectif du contrôle, afin que les utilisateurs de technologies d'assistance aient un sens. Dans ce cas, vous pouvez ajouter un attribut aria-label sur le contrôle lui-même.
span>
Exemples
Utilisez-les dans des boutons, des groupes de boutons pour une barre d'outils, une navigation ou des entrées de formulaire ajoutées.
Étoile étoile étoile étoile
span> span> span> bouton> span> Étoile button>
Icône utilisée dans une alerte pour indiquer qu’il s’agit d’un message d’erreur, avec un texte supplémentaire .sr uniquement pour transmettre cette indication aux utilisateurs de technologies d’assistance.
Erreur: Entrez une adresse email valide
Des listes déroulantes Menu contextuel commutable permettant d'afficher des listes de liens. Rendu interactif avec le plugin JavaScript déroulant. Exemple Enveloppez le déclencheur du menu déroulant et le menu déroulant dans .dropdown, ou un autre élément déclarant la position: relative ;. Ajoutez ensuite le code HTML du menu. Menu déroulant Les menus déroulants peuvent être modifiés pour se développer vers le haut (plutôt que vers le bas) en ajoutant .dropup au parent. Déposer jusqu'à Alignement Par défaut, un menu déroulant est automatiquement positionné à 100% du haut et du côté gauche de son parent. Ajoutez .dropdown-menu-right à un .dropdown-menu pour aligner à droite le menu déroulant. Peut nécessiter un positionnement supplémentaire Les listes déroulantes sont automatiquement positionnées via CSS dans le flux normal du document. Cela signifie que les parents avec certaines propriétés de débordement peuvent recadrer les menus déroulants ou apparaître en dehors des limites de la fenêtre d'affichage. Abordez ces problèmes vous-même au fur et à mesure qu'ils surviennent. Alignement .pull à droite obsolète Depuis la version 3.1.0, nous avons déconseillé d'utiliser .pull-right dans les menus déroulants. Pour aligner un menu à droite, utilisez .dropdown-menu-right. Les composants de navigation alignés à droite dans la barre de navigation utilisent une version mixin de cette classe pour aligner automatiquement le menu. Pour le remplacer, utilisez .dropdown-menu-left. En-têtes Ajoutez un en-tête pour étiqueter les sections d’actions dans n’importe quel menu déroulant. Menu déroulant Diviseur Ajoutez un séparateur pour séparer les séries de liens dans un menu déroulant. Menu déroulant Éléments de menu désactivés Ajoutez .disabled à un Menu déroulant Groupes de boutons Regroupez une série de boutons sur une seule ligne avec le groupe de boutons. Ajoutez le comportement optionnel du style radio et case à cocher JavaScript avec notre plugin de boutons. Les infobulles et les occurrences dans les groupes de boutons nécessitent des réglages spéciaux Lorsque vous utilisez des info-bulles ou des popovers sur des éléments d’un groupe .btn, vous devez spécifier l’option container: 'body' pour éviter les effets secondaires indésirables (tels que l’élargissement de l’élément et / ou la perte de ses coins arrondis lorsque l’infobulle ou popover est déclenché). Assurer le rôle correct et fournir une étiquette Pour que les technologies d'assistance, telles que les lecteurs d'écran, indiquent qu'une série de boutons est groupée, un attribut approprié doit être fourni. Pour les groupes de boutons, il s'agirait de rôle = "groupe", tandis que les barres d'outils devraient avoir un rôle = "barre d'outils". Les groupes qui ne contiennent qu'un seul contrôle (par exemple, les groupes de boutons justifiés avec des éléments ) ou une liste déroulante constituent une exception. En outre, les groupes et les barres d’outils doivent recevoir une étiquette explicite, car la plupart des technologies d’aide ne les annonceraient pas, malgré la présence de l’attribut de rôle correct. Dans les exemples fournis ici, nous utilisons aria-label, mais des alternatives telles que aria-labelledby peuvent également être utilisées. Exemple de base Enveloppez une série de boutons avec .btn dans le groupe .btn. LeftMiddleRight Bouton barre d'outils Combinez des ensembles de