Glyphicons Bootstrap
Il s'agit d'une bibliothèque d'icônes monochromatiques disponibles dans des formats d'image raster, des formats d'image vectorielle et sous forme de polices. Il fournit plus de 250 glyphes au format de police. Vous pouvez utiliser ces polices dans vos projets Web. Ces glyphes ne sont pas gratuits, cependant si vous n'avez rien à dépenser au cas où vous les utiliseriez dans des projets basés sur Bootstrap.
Chargement de la police (bibliothèque)
Pour charger la bibliothèque Bootstrap Glyphicons, copiez et collez la ligne suivante dans la section <head> de la page Web.
<head>
<link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>Utilisation de l'icône
Bootstrap Glyphicons fournit un certain nombre d'icônes. Choisissez l'un d'eux et ajoutez le nom de la classe d'icônes à n'importe quel élément HTML de la balise <body>. Dans l'exemple suivant, nous avons utilisé l'icône de l'arbre et son nom de classe esttree-deciduous.
<html>
<head>
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<i class = "glyphicon glyphicon-tree-deciduous"> </i>
</body>
</html>Il produira la sortie suivante -
Définition de la taille
Vous pouvez augmenter ou diminuer la taille d'une icône en définissant sa taille dans le CSS et en l'utilisant avec le nom de la classe comme indiqué ci-dessous. Dans l'exemple suivant, nous avons défini la taille à 6 em.
<html>
<head>
<link rel="stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>Il produira la sortie suivante:
Définition de la couleur
Vous pouvez définir la couleur d'une icône à l'aide du CSS. L'exemple suivant montre comment modifier la couleur de l'icône de l'arborescence.
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"><style>
i.mysize {font-size: 6em; color: blue;}
</style>
</head>
<body>
<i class="glyphicon glyphicon-tree-deciduous mysize"></i>
</body>
</html>Il produira la sortie suivante -