Comment utiliser l'icône de police bootstrap-Tutoriel d'amorçage-php.cn

Comment utiliser l'icône de police bootstrap

angryTom

Libérer： 2019-07-27 11:41:43

original

5021 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

Le résultat ressemble à ceci :

Comment utiliser licône de police bootstrap

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>

Copier après la connexion

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>

Copier après la connexion

L'effet est le suivant :

Comment utiliser licône de police bootstrap

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>

Copier après la connexion

Comment utiliser licône de police bootstrap

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>

Copier après la connexion

Comment utiliser licône de police bootstrap

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>

Copier après la connexion

Comment utiliser licône de police bootstrap