Bootstrap Icons

Introduction

Dans ce tutoriel, vous apprendrez à utiliser la boîte à outils Bootstrap 2.0 pour créer des icônes. Les icônes Bootstrap sont fournies par Glyphicons. Si vous utilisez ces icônes dans votre projet, veuillez vous assurer de fournirGlyphiconsle lien.

Utilisation comme CSS Sprites

Toutes les images d'icônes sont regroupées et viala propriété CSS background-positionutilisées. Le fichier image est glyphicons-halflings.png, situé dans le dossier img sous le dossier principal de Bootstrap. Les styles et les positions d'arrière-plan des icônes sont spécifiés dans bootstrap.css de la ligne 1168 à la ligne 1544. Notez que pour éviter les conflits, toutes les classes d'icônes sont préfixées par "icon-". Bootstrap 2.0 définit 120 classes d'icônes.

Comment utiliser les icônes sur votre propre site ou application

Voici la syntaxe générale pour utiliser les icônes sur un site ou une application :

 <i class="icon_class_name"></i>

Oùicon_class_nameest le nom de la classe d'icône définie dans bootstrap.css (par exemple, icon-music, icon-star, icon-user, etc.).

Si vous souhaitez utiliser des icônes blanches, ajoutez une classe icon-white supplémentaire, comme indiqué ci-dessous :

<i class="icon_class_name icon-white"></i>  </i>

Ajoutez quelques espaces après. Cela peut se produire lors de l'utilisation d'icônes dans des boutons ou certains liens de navigation. Si vous souhaitez utiliser des icônes avec des chaînes de caractères, n'oubliez pas de

Exemple : un formulaire de recherche

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>Exemple d'utilisation d'une icône de recherche dans Bootstrap version 2.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Exemple d'utilisation d'icônes dans un formulaire de recherche - Bootstrap version 2.0 de w3cschool.cc">
    <meta name="author" content="">

    <!-- Les styles -->
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
    <style type="text/css">
        form {
            margin-top: 50px;
        }
    </style>
    <!-- Le shim HTML5, pour la prise en charge des éléments HTML5 par IE6-8 -->
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Les favicons et icônes tactiles -->
    <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico.html">
    <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png.html">
    <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png.html">
    <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png.html">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span12">
            <form class="well form-search">
                <input type="text" class="input-medium search-query">
<button type="submit" class="btn"><i class="icon-search"></i> Rechercher</button>
            </form>
        </div>
    </div>
    <footer>
        <p>&copy; Société 2013</p>
    </footer>
</div>
</body>
</html>

Voir en ligne

Affichez l'exemple ci-dessus dans une autre fenêtre de navigateur.

Exemple : Utilisation des icônes dans la navigation

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>Utilisation des icônes dans la navigation dans Bootstrap version 2.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Exemple d'icônes dans la navigation avec Bootstrap version 2.0 de w3cschool.cc">
    <meta name="author" content="">

    <!-- Les styles -->
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
    <!-- Le shim HTML5, pour la prise en charge des éléments HTML5 par IE6-8 -->
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Les favicons et icônes tactiles -->
    <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico.html">
    <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png.html">
    <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png.html">
    <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png.html">
</head>

<body>
<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="../index.html">exemple</a>
            <div class="nav-collapse">
                <ul class="nav">
                    <li class="active"><a href="../index.html"><i class="icon-user icon-white"></i> Accueil</a></li>
                    <li><a href="../index.html"><i class="icon-user icon-white"></i> Utilisateur</a></li>
                    <li><a href="../index.html"><i class="icon-download icon-white"></i> Télécharger</a></li>
                    <li><a href="../index.html"><i class="icon-upload icon-white"></i> Téléverser</a></li>
                    <li><a href="../index.html"><i class="icon-play-circle icon-white"></i> Cercle de lecture</a></li>
                    <li><a href="../index.html"><i class="icon-bookmark icon-white"></i> Marque-page</a></li>
                    <li><a href="../index.html"><i class="icon-gift icon-white"></i> Cadeau</a></li>
                </ul>
            </div><!--/.nav-collapse -->
        </div>
    </div>
</div>

<hr>
</div> <!-- /container -->

<!-- Le javascript
================================================== -->
<!-- Placez-le en bas de la page pour accélérer le chargement -->
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>

</body>
</html>

Voir en ligne

Affichez l'exemple ci-dessus dans une autre fenêtre de navigateur.

Exemple : Utilisation d'icônes dans les boutons et les groupes de boutons

Exemple

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
<title>Utilisation d'icônes dans les boutons et les groupes de boutons dans Bootstrap version 2.0</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Exemple d'utilisation d'icônes dans les boutons et les groupes de boutons - Bootstrap version 2.0 de w3cschool.cc">
    <meta name="author" content="">

    <!-- Les styles -->
    <link href="../bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css.html" rel="stylesheet">
    <style type="text/css">
        form {
            margin-top: 50px;
        }
    </style>
    <!-- Le shim HTML5, pour la prise en charge des éléments HTML5 par IE6-8 -->
    <!--[if lt IE 9]>
    <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Les favicons et icônes tactiles -->
    <link rel="shortcut icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/favicon.ico.html">
    <link rel="apple-touch-icon" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon.png.html">
    <link rel="apple-touch-icon" sizes="72x72" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-72x72.png.html">
    <link rel="apple-touch-icon" sizes="114x114" href="../bootstrap/twitter-bootstrap-v2/docs/examples/images/apple-touch-icon-114x114.png.html">
</head>
<body>
<div class="container">
    <div class="row">
        <div class="span4">
            <div class="btn-toolbar" style="margin-bottom: 9px">
                <div class="btn-group">
                    <a class="btn" href="../index.html"><i class="icon-align-left"></i></a>
                    <a class="btn" href="../index.html"><i class="icon-align-center"></i></a>
                    <a class="btn" href="../index.html"><i class="icon-align-right"></i></a>
                    <a class="btn" href="../index.html"><i class="icon-align-justify"></i></a>
                </div>
                <div class="btn-group">
                    <a class="btn btn-primary" href="../index.html"><i class="icon-user icon-white"></i> Utilisateur</a>
                    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="../index.html"><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="../index.html"><i class="icon-pencil"></i> Modifier</a></li>
                        <li><a href="../index.html"><i class="icon-trash"></i> Supprimer</a></li>
                        <li><a href="../index.html"><i class="icon-ban-circle"></i> Bannir</a></li>
                        <li class="divider"></li>
                        <li><a href="../index.html"><i class="i"></i> Rendre administrateur</a></li>
                    </ul>
                </div>
            </div>
            <p>
                <a class="btn" href="../index.html"><i class="icon-refresh"></i> Actualiser</a>
                <a class="btn btn-success" href="../index.html"><i class="icon-shopping-cart icon-white"></i> Passer à la caisse</a>
                <a class="btn btn-danger" href="../index.html"><i class="icon-trash icon-white"></i> Supprimer</a>
            </p>
            <p>
                <a class="btn btn-large" href="../index.html"><i class="icon-comment"></i> Commenter</a>
                <a class="btn btn-small" href="../index.html"><i class="icon-cog"></i> Paramètres</a>
                <a class="btn btn-small btn-info" href="../index.html"><i class="icon-info-sign icon-white"></i> Plus d'infos</a>
            </p>
        </div>
    </div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placez-le en bas de la page pour accélérer le chargement -->
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-transition.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-alert.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-modal.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-dropdown.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-scrollspy.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tab.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-tooltip.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-popover.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-button.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-collapse.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-carousel.js.html"></script>
<script src="../bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js.html"></script>
</body>
</html>

Voir en ligne

Affichez l'exemple ci-dessus dans une autre fenêtre de navigateur.

Cliquez ici pour télécharger tous les fichiers HTML, CSS, JS et images utilisés dans ce tutoriel.

Autres extensions