Icône de police Bootstrap
Ce chapitre expliquera les icônes de polices (Glyphicons) et comprendra leur utilisation à travers quelques exemples. Bootstrap est fourni avec des glyphes dans plus de 200 formats de police. Tout d’abord, comprenons d’abord ce qu’est une icône de police.
Qu'est-ce qu'une icône de police ?
Font Icon est une police d'icônes utilisée dans les projets Web. Bien que les Glyphicons Halflings nécessitent une licence commerciale, vous pouvez utiliser ces icônes gratuitement via Bootstrap basé sur un projet.
Pour exprimer notre gratitude à l'auteur de l'icône, nous espérons que vous inclurez un lien vers le site GLYPHICONS lors de son utilisation.
Obtenez l'icône de police
Nous avons téléchargé la version Bootstrap 3.x dans le chapitre Installation de l'environnement et compris sa structure de répertoires. Les icônes de police se trouvent dans le dossier fonts, qui contient les fichiers suivants :
glyphicons-halflings-regular.eot
-
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
Les règles CSS pertinentes sont écrites dans bootstrap.css et bootstrap-min dans le dossier css du dossier dist css<. 🎜> fichier.
Liste des icônes de policeCliquez ici pour voir la liste des icônes de police disponibles.Explication des règles CSSLes règles CSS suivantes constituent la classe glyphicon.
@font-face {
Exécuter l'instance »
Exécuter l'instance »
Appliquer l'ombre du texte
font-family : 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src : url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position : relative;
haut : 1px;
affichage : bloc en ligne ;
famille de polices : 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz- osx-font-smoothing : niveaux de gris ;
}
src: url('../fonts/glyphicons-halflings-regular.eot');
src : url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
.glyphicon {
position : relative;
haut : 1px;
affichage : bloc en ligne ;
famille de polices : 'Glyphicons Halflings';
-webkit-font-smoothing: antialiased;
font-style: normal;
font-weight: normal;
line-height: 1;
-moz- osx-font-smoothing : niveaux de gris ;
}
Ainsi, la règle font-face déclare en fait la famille de polices et la position où se trouvent les glyphicons. La classe
.glyphicon déclare une position relative décalée de 1 px à partir du haut, la restitue sous forme de bloc en ligne, déclare la police, spécifie le style de police et le poids de la police comme d'habitude et définit le hauteur de ligne égale à 1. Sinon, utilisez -webkit-font-smoothing: antialiased et -moz-osx-font-smoothing: grayscale; pour une cohérence entre navigateurs.
Ensuite, ici
.glyphicon:empty {
width: 1em;
}
width: 1em;
}
est un glyphicon vide.
Il y a 200 classes, chaque classe est pour une icône. Le format commun de ces classes est le suivant :
.glyphicon-keyword:before {
content: "hexvalue";
}
content: "hexvalue";
}
Par exemple , utilisez l'utilisateur Icon, sa classe est la suivante :
.glyphicon-user:before {
content: "e008";
}
content: "e008";
}
Utilisation
Pour utiliser les icônes, utilisez simplement le code ci-dessous. Veuillez laisser un espace approprié entre l'icône et le texte.
<span class="glyphicon glyphicon-search"></span>
L'exemple suivant montre comment utiliser les icônes de police :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 如何使用字体图标</title>
≪ link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs. baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/ bootstrap.min.js"></script></head>
<body>
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
< button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user "></envergure> Utilisateur
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user">< ;/envergure> Utilisateur
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user">< ;/envergure> Utilisateur
</button>
</body>
</html>
<html>
<head>
<title>Bootstrap 实例 - 如何使用字体图标</title>
≪ link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs. baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/ bootstrap.min.js"></script></head>
<body>
<p>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</button>
< button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order"></span>
</button>
<button type="button" class="btn btn-default">
<span class="glyphicon glyphicon-sort-by-order-alt"></span>
</button>
</p>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-user "></envergure> Utilisateur
</button>
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-user">< ;/envergure> Utilisateur
</button>
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user">< ;/envergure> Utilisateur
</button>
</body>
</html>
实例
<!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 如何使用字体图标</title> <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> </head> <body> <p> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-attributes-alt"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-order"></span> </button> <button type="button" class="btn btn-default"> <span class="glyphicon glyphicon-sort-by-order-alt"></span> </button> </p> <button type="button" class="btn btn-default btn-lg"> <span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-default btn-sm"> <span class="glyphicon glyphicon-user"></span> User </button> <button type="button" class="btn btn-default btn-xs"> <span class="glyphicon glyphicon-user"></span> User </button> </body> </html>
Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
带有导航栏的字体图标
<!DOCTYPE html>
<html>
<head>
<title>导航栏的字体图标</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style>
corps {
padding-top : 50px;
padding-left : 50px;
}
</style>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]--> ;
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class= "conteneur">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=" .navbar-collapse">
<span class="sr-only">Basculer la navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
< ;a class="navbar-brand" href="#">Nom du projet</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
<li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
<li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
<!-- jQuery (Bootstrap 插件需要引入) -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包含了所有编译插件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
<html>
<head>
<title>导航栏的字体图标</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style>
corps {
padding-top : 50px;
padding-left : 50px;
}
</style>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]--> ;
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class= "conteneur">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=" .navbar-collapse">
<span class="sr-only">Basculer la navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
< ;a class="navbar-brand" href="#">Nom du projet</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
<li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
<li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
<!-- jQuery (Bootstrap 插件需要引入) -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包含了所有编译插件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
实例
<!DOCTYPE html>
<html>
<head>
<title>导航栏的字形图标</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
padding-top: 50px;
padding-left: 50px;
}
</style>
<!--[if lt IE 9]>
<script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#"><span class="glyphicon glyphicon-home">Home</span></a></li>
<li><a href="#shop"><span class="glyphicon glyphicon-shopping-cart">Shop</span></a></li>
<li><a href="#support"><span class="glyphicon glyphicon-headphones">Support</span></a></li>
</ul>
</div><!-- /.nav-collapse -->
</div><!-- /.container -->
</div>
<!-- jQuery (Bootstrap 插件需要引入) -->
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 包含了所有编译插件 -->
<script src="http://apps.bdimg.com/libs/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
定制字体图标
我们已经看到如何使用字体图标，接下来我们看看如何定制字体图标。
我们将以上面的实例开始，并通过改变字体尺寸、颜色和应用文本阴影来进行定制图标。
下面是开始的代码：
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-user"></span> User
</button>
<span class="glyphicon glyphicon-user"></span> User
</button>
Personnaliser la taille de la police
Vous pouvez agrandir ou réduire votre icône en augmentant ou en diminuant sa taille de police.
<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
<span class="glyphicon glyphicon -user"></span> Utilisateur
</button>
<span class="glyphicon glyphicon -user"></span> Utilisateur
</button>
Couleur de police personnalisée
<button type="button" class= "btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
<span class="glyphicon glyphicon-user"></span> ></button>
<span class="glyphicon glyphicon-user"></span> ></button>
<button type="button" class="btn btn-primary btn-lg" style="text -ombre : noir 5px 3px 3px;">
<span class="glyphicon glyphicon-user"></span> Utilisateur
</button>
</button>
Icônes de polices personnalisées en ligne
Liste d'icônes
<td
<t
| icône | nom de classe | instance |
|---|---|---|
| glyphicon glyphicon-asterisk | essayez-le | |
| glyphicon glyphicon-plus | essayez-le | |
| glyphicon glyphicon-minus | Essayez-le | |
| glyphicon glyphicon-euro | Essayez-le | |
| glyphicon glyphicon-cloud | Essayez-le | |
| glyphicon glyphicon-envelope | Essayez-le | |
| glyphicon glyphicon-pencil | Essayez-le | |
| glyphicon glyphicon-glass | Essayez-le | |
| glyphicon glyphicon-music | Essayez-le | |
| glyphicon glyphicon-search | Essayez-le | |
| glyphicon glyphicon-coeur | Essayez-le | |
| glyphicon glyphicon -star | Essayez-le | |
| glyphicon glyphicon-star-empty | Essayez-le | |
| glyphicon glyphicon-user | Essayez-le | |
| glyphicon glyphicon-film | Essayez-le | |
| glyphicon glyphicon-th-large | Essayez-le | |
| glyphicon glyphicon-th | Essayez-le | |
| glyphicon glyphicon-th-list | Essayez-le | |
| glyphicon glyphicon-ok | Essayez-le | |
| glyphicon glyphicon-remove | Essayez-le | |
| glyphicon glyphicon-zoom-in | Essayez-le | |
| glyphicon glyphicon-zoom-out | Essayez-le | |
| glyphicon glyphicon-off | Essayez-le | |
| glyphicon glyphicon-signal | Essayez-le | |
| glyphicon glyphicon-cog | Essayez-le | |
| glyphicon glyphicon-trash | Essayez-le | |
| glyphicon glyphicon-home | Essayez-le | |
| glyphicon glyphicon-file | Essayez-le | |
| glyphicon glyphicon -time | Essayez-le | |
| glyphicon glyphicon-road | Essayez-le | |
| glyphicon glyphicon-download-alt | Essayez-le | |
| glyphicon glyphicon-download | Essayez-le | |
| glyphicon glyphicon-upload | Essayez-le | |
| glyphicon glyphicon-inbox | Essayez-le | |
| glyphicon glyphicon-play-circle | Essayez-le | |
| glyphicon glyphicon-repeat | Essayez-le | |
| glyphicon glyphicon-refresh | Essayez-le | |
| glyphicon glyphicon-list-alt | Essayez-le | |
| glyphicon glyphicon-lock | Essayez-le | |
| glyphicon glyphicon-flag | Essayez-le | |
| glyphicon glyphicon-headphones | Essayez-le | |
| glyphicon glyphicon-volume-off | Essayez-le | |
| glyphicon glyphicon-volume-down | Essayez-le | |
| glyphicon glyphicon-volume-up | Essayez-le | |
| glyphicon glyphicon-qrcode | Essayez-le | |
| glyphicon glyphicon-barcode | Essayez-le | |
| glyphicon glyphicon-tag | Essayez-le | |
| glyphicon glyphicon-tags | Essayez-le | |
| glyphicon glyphicon-book | Essayez-le | |
| glyphicon glyphicon-bookmark | Essayez-le | |
| glyphicon glyphicon -print | Essayez-le | |
| glyphicon glyphicon-camera | Essayez-le | |
| glyphicon glyphicon-font | Essayez-le | |
| glyphicon glyphicon-bold | Essayez-le | |
| glyphicon glyphicon-italic | Essayez-le | |
| glyphicon glyphicon-text-height | Essayez-le | |
| glyphicon glyphicon-text-width | Essayez-le | |
| glyphicon glyphicon-align-left | Essayez-le | |
| glyphicon glyphicon-align-center | Essayez-le | |
| glyphicon glyphicon-align-right | Essayez-le | |
| glyphicon glyphicon-align-justify | Essayez-le | |
| glyphicon glyphicon-list | Essayez-le | |
| glyphicon glyphicon-indent-left | Essayez-le | |
| glyphicon glyphicon-indent-right | Essayez-le | |
| glyphicon glyphicon-facetime-video | Essayez-le | |
| glyphicon glyphicon-picture | Essayez-le | |
| glyphicon glyphicon-map-marker | Essayez-le | |
| glyphicon glyphicon-adjust | Essayez-le | |
| glyphicon glyphicon-tint | Essayez-le | |
| glyphicon glyphicon-edit | Essayez-le | |
| glyphicon glyphicon-share | Essayez-le | |
| glyphicon glyphicon-check | Essayez-le | |
| glyphicon glyphicon-move | Essayez-le | |
| glyphicon glyphicon-step-backward | Essayez-le | |
| glyphicon glyphicon-fast-backward | Essayez-le | |
| glyphicon glyphicon -en arrière | Essayez-le | |
| glyphicon glyphicon-play | Essayez-le | |
| glyphicon glyphicon-pause | Essayez-le | |
| glyphicon glyphicon-stop | Essayez-le | |
| glyphicon glyphicon-forward | Essayez-le | |
| glyphicon glyphicon-fast-forward | Essayez-le | |
| glyphicon glyphicon-step-forward | Essayez-le | |
| glyphicon glyphicon-eject | Essayez-le | |
| glyphicon glyphicon-chevron-left | Essayez-le | |
| glyphicon glyphicon-chevron-right | Essayez-le | |
| glyphicon glyphicon-plus-sign | Essayez-le | |
| glyphicon glyphicon-moins-sign | Essayez-le | |
| glyphicon glyphicon-remove-sign | Essayez-le | |
| glyphicon glyphicon-ok-sign | essayez-le | |
| glyphicon glyphicon-question -sign | Essayez-le | |
| glyphicon glyphicon-info-sign | Essayez-le | |
| glyphicon glyphicon-screenshot | Essayez-le | |
| glyphicon glyphicon-remove-circle | Essayez-le | |
| glyphicon glyphicon-ok -circle | Essayez-le | |
| glyphicon glyphicon-ban-circle | Essayez-le | |
| glyphicon glyphicon-arrow-left | Essayez-le | |
| glyphicon glyphicon-arrow-right | Essayez-le | |
| glyphicon glyphicon -flèche vers le haut | Essayez-le | |
| glyphicon glyphicon-arrow-down | Essayez-le | |
| glyphicon glyphicon-share-alt | Essayez-le | |
| glyphicon glyphicon-resize-full | Essayez-le | |
| glyphicon glyphicon-resize-small | Essayez-le | |
| glyphicon glyphicon-exclamation-sign | Essayez-le | |
| glyphicon glyphicon-gift | Essayez-le | |
| glyphicon glyphicon-leaf | Essayez-le | |
| glyphicon glyphicon-fire | Essayez-le | |
| glyphicon glyphicon-eye-open | Essayez-le | |
| glyphicon glyphicon-eye-close | Essayez-le | |
| glyphicon glyphicon-warning-sign | Essayez-le | |
| glyphicon glyphicon-avion | Essayez-le | |
| glyphicon glyphicon-calendrier | Essayez-le | |
| glyphicon glyphicon-random | Essayez-le | |
| glyphicon glyphicon-comment | Essayez-le | |
| glyphicon glyphicon-magnet | essayez-le | |
| glyphicon glyphicon-chevron-up | essayez-le | |
| glyphicon glyphicon-chevron-down | Essayez-le | |
| glyphicon glyphicon-retweet | Essayez-le | |
| glyphicon glyphicon -shopping-cart | Essayez-le | |
| glyphicon glyphicon-folder-close | Essayez-le | |
| glyphicon glyphicon-folder-open | Essayez-le | |
| glyphicon glyphicon-resize-vertical | Essayez-le | |
| glyphicon glyphicon-resize-horizontal | Essayez-le | |
| glyphicon glyphicon-hdd | Essayez-le | |
| glyphicon glyphicon-bullhorn | Essayez-le | |
| glyphicon glyphicon-bell | Essayez-le | |
| glyphicon glyphicon-certificate | Essayez-le | |
| glyphicon glyphicon-thumbs-up | Essayez-le | |
| glyphicon glyphicon-thumbs-down | Essayez-le | |
| glyphicon glyphicon-hand-right | Essayez-le | |
| glyphicon glyphicon-hand-left | Essayez-le | |
| glyphicon glyphicon-hand-up | Essayez-le | |
| glyphicon glyphicon-hand -down | Essayez-le | |
| glyphicon glyphicon-circle-arrow-right | Essayez-le | |
| glyphicon glyphicon-circle-arrow-left | Essayez-le | |
| glyphicon glyphicon-circle-arrow-up | Essayez-le | |
| glyphicon glyphicon-circle-arrow-down | Essayez-le | |
| glyphicon glyphicon-globe | Essayez-le | |
| glyphicon clé-glyphicon | Essayez-le | |
| glyphicon glyphicon-tâches | Essayez-le | |
| glyphicon glyphicon-filter | essayez-le | |
| glyphicon glyphicon-briefcase | essayez-le | |
| glyphicon glyphicon-fullscreen | Essayez-le | |
| glyphicon glyphicon-dashboard | Essayez-le | |
| glyphicon glyphicon-paperclip | Essayez-le | |
| glyphicon glyphicon-heart-empty | Essayez-le | |
| glyphicon glyphicon-link | Essayez-le | |
| glyphicon glyphicon-phone | Essayez-le | |
| glyphicon glyphicon-pushpin | Essayez-le | |
| glyphicon glyphicon-usd | Essayez-le | |
| glyphicon glyphicon-gbp | Essayez-le | |
| glyphicon glyphicon-sort | Essayez-le | |
| glyphicon glyphicon-tri-by-alphabet | Essayez-le | |
| glyphicon glyphicon-sort-by-alphabet-alt | Essayez-le | |
| glyphicon glyphicon-sort-by-order | Essayez-le | |
| glyphicon glyphicon-sort-by-order-alt | Essayez-le | |
| glyphicon glyphicon-sort-by-attributes | Essayez-le | |
| glyphicon glyphicon-sort-by-attributes-alt | Essayez-le | |
| glyphicon glyphicon-unchecked | Essayez-le | |
| glyphicon glyphicon-expand | Essayez-le | |
| glyphicon glyphicon-collapse-down | Essayez-le | |
| glyphicon glyphicon-collapse-up | Essayez-le | |
| glyphicon glyphicon-log-in | Essayez-le | |
| glyphicon glyphicon-flash | Essayez-le | |
| glyphicon glyphicon-log-out | Essayez-le | |
| glyphicon glyphicon-new-window | Essayez-le | |
| glyphicon glyphicon-record | Essayez-le | |
| glyphicon glyphicon-save | Essayez-le | |
| glyphicon glyphicon-open | Essayez-le | |
| glyphicon glyphicon-saved | Essayez-le | |
