Comment utiliser l'icône de police bootstrap

Si vous souhaitez en savoir plus sur Bootstrap, vous pouvez cliquer sur : Tutoriel Bootstrap

Cet article expliquera les icônes de polices (Glyphicons) et comprendra leur utilisation à travers quelques exemples. Bootstrap est livré avec des glyphes dans plus de 200 formats de police. Tout d’abord, comprenons d’abord ce qu’est une icône de police.

Que sont les icônes de police

Les icônes de police sont des polices d'icônes utilisées dans les projets Web. Bien que les Glyphicons Halflings nécessitent une licence commerciale, vous pouvez utiliser ces icônes gratuitement via le Bootstrap basé sur un projet.

Afin d'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.

Obtenir l'icône de police

L'icône de police se trouve dans le dossier des polices, qui contient les fichiers suivants :

●glyphicons-halflings-regular.eot

Quantityglyphicons-halflings-regular.svg

Quantityglyphicons-halflings-regular.ttf

Quantityglyphicons-halflings-regular. woff

Les règles CSS pertinentes sont écrites dans les fichiers bootstrap.css et bootstrap-min.css dans le dossier css du dossier dist.

Utilisation

Pour utiliser l'icône, 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 :

<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>

Le résultat ressemble à ceci :

Navigation avec les icônes de police Colonne

<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://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><!-- 包含了所有编译插件 --><script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Personnaliser les icônes de police

Nous avons vu comment utiliser les icônes de police, voyons ensuite comment personnaliser les icônes de police.

Nous allons commencer par l'exemple ci-dessus et personnaliser l'icône en modifiant la taille de la police, la couleur et en appliquant une ombre au texte.

Voici le code de départ :

<button type="button" class="btn btn-primary btn-lg">
  <span class="glyphicon glyphicon-user"></span> User</button>

L'effet est le suivant :

Taille de police personnalisée

Vous pouvez agrandir ou réduire une icône en augmentant ou en diminuant la taille de sa police

<button type="button" class="btn btn-primary btn-lg" style="font-size: 60px">
  <span class="glyphicon glyphicon-user"></span> User</button>

Personnaliser couleur de la police

<button type="button" class="btn btn-primary btn-lg" style="color: rgb(212, 106, 64);">
  <span class="glyphicon glyphicon-user"></span> User</button>

Appliquer l'ombre du texte

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User</button>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!