English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

le tutoriel de base Bootstrap

les plugins Bootstrap

Icones de police Bootstrap (Glyphicons)

Ce chapitre expliquera les icônes de police de caractères (Glyphicons) et vous permettra de comprendre leur utilisation à travers quelques exemples. Bootstrap intègre 200 types de police de caractères. Tout d'abord, comprenons ce qu'est une icône de police de caractères.

Qu'est-ce que les icônes de police de caractères ?

Les icônes de police de caractères sont des polices de caractères utilisées dans les projets Web. Bien queGlyphicons Halflings un permis commercial est nécessaire, mais vous pouvez utiliser gratuitement ces icônes via Bootstrap basé sur le projet.

Pour exprimer notre gratitude aux auteurs des icônes, nous espérons que vous ajouterez un lien vers le site Web GLYPHICONS lors de votre utilisation.

obtenir des icônes de police de caractères

Nous avons déjà l'installation de l'environnement le chapitre a téléchargé Bootstrap 3la version .x et comprendre sa structure de répertoire. Dans fonts Vous pouvez trouver des icônes de police de caractères dans le dossier, 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 dist Le dossier css dans le dossier bootstrap.css 和 bootstrap-min.css 文件上。

字体图标列表

点击这里，查看可用的字体图标列表。

CSS 规则解释

下面的 CSS 规则构成 glyphicon class。

结果如下所示：

带有字体图标的导航栏

在线示例

<!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">
　　　　<title>导航栏的字形图标</title>
　　　　<meta　name="viewport"　content="width=device-width,　initial-scale=1.0">
　　　　<!--　Bootstrap　--">
　　　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
<style>
　body　{
	padding-top:　50px;
　　　　padding-left:　50px;
}
</style>
<!--[if　lt　IE　9]>
	<script　src="https://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>
			</bouton>
			<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/span>　Home</a></li>
				<li><a　href="#shop"><span　class="glyphicon　glyphicon-achat-cart></span>　Shop</a></li>
				<li><a　href="#support"><span　class="glyphicon　glyphicon-headphones></span>　Support</a></li>
			</ul>
		</div><!--　/.nav-effondrement　--">
	</div><!--　/.container　--">
</div>
<!--　jQuery　(Nous devons inclure pour les plugins Bootstrap)　--">
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--　Contient tous les plugins compilés　--">
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Testez pour voir ‹/›

personnalisation des icônes de police

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

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

Voici le début du code :

<bouton　type="bouton">
　　<span></span>　User
</bouton>

Voici l'effet montré ci-dessous :


personnalisation de la taille de police

En augmentant ou en réduisant la taille de la police des icônes, vous pouvez rendre les icônes plus grandes ou plus petites.

<bouton　type="bouton"　style="police-taille:　60px">
　　<span></span>　User
</bouton>


personnalisation de la couleur de police

<bouton　type="bouton"　style="couleur:　rgb(212,　106,　64);">
　　<span></span>　User
</bouton>

application de l'ombre de texte

<bouton　type="bouton"　style="text-ombre:　noir　5px　3px　3px;">
　　<span></span>　User
</bouton>

personnalisation en ligne des icônes de police

cliquez ici pour personnaliser les icônes de police »

图标列表

图标类名实例

glyphicon glyphicon-asteriskEssayer

glyphicon glyphicon-plusEssayer

glyphicon glyphicon-moinsEssayer

glyphicon glyphicon-euroEssayer

glyphicon glyphicon-cloudEssayer

glyphicon glyphicon-envelopeEssayer

glyphicon glyphicon-pencilEssayer

glyphicon glyphicon-glassEssayer

glyphicon glyphicon-musicEssayer

glyphicon glyphicon-searchEssayer

glyphicon glyphicon-cœurEssayer

glyphicon glyphicon-starEssayer

glyphicon glyphicon-star-videEssayer

glyphicon glyphicon-userEssayer

glyphicon glyphicon-filmEssayer

glyphicon glyphicon-th-largeEssayer

glyphicon glyphicon-thEssayer

glyphicon glyphicon-th-listeEssayer

glyphicon glyphicon-d'accordEssayer

glyphicon glyphicon-supprimerEssayer

glyphicon glyphicon-zoom-dansEssayer

glyphicon glyphicon-zoom-dehorsEssayer

glyphicon glyphicon-arrêtEssayer

glyphicon glyphicon-signalEssayer

glyphicon glyphicon-cogEssayer

glyphicon glyphicon-trashEssayer

glyphicon glyphicon-homeEssayer

glyphicon glyphicon-fileEssayer

glyphicon glyphicon-timeEssayer

glyphicon glyphicon-roadEssayer

glyphicon glyphicon-download-altEssayer

glyphicon glyphicon-downloadEssayer

glyphicon glyphicon-uploadEssayer

glyphicon glyphicon-inboxEssayer

glyphicon glyphicon-jouer-cercleEssayer

glyphicon glyphicon-répéterEssayer

glyphicon glyphicon-rafraîchirEssayer

glyphicon glyphicon-liste-altEssayer

glyphicon glyphicon-verrouillerEssayer

glyphicon glyphicon-drapeauEssayer

glyphicon glyphicon-écouteursEssayer

glyphicon glyphicon-volume-arrêtEssayer

glyphicon glyphicon-volume-basEssayer

glyphicon glyphicon-volume-hautEssayer

glyphicon glyphicon-QR codeEssayer

glyphicon glyphicon-code-barresEssayer

glyphicon glyphicon-étiquetteEssayer

glyphicon glyphicon-étiquettesEssayer

glyphicon glyphicon-livreEssayer

glyphicon glyphicon-favoriEssayer

glyphicon glyphicon-imprimerEssayer

glyphicon glyphicon-appareil photoEssayer

glyphicon glyphicon-policeEssayer

glyphicon glyphicon-grasEssayer

glyphicon glyphicon-italiqueEssayer

glyphicon glyphicon-texte-hauteurEssayer

glyphicon glyphicon-texte-largeurEssayer

glyphicon glyphicon-aligner-gaucheEssayer

glyphicon glyphicon-aligner-centrerEssayer

glyphicon glyphicon-aligner-droiteEssayer

glyphicon glyphicon-aligner-justifierEssayer

glyphicon glyphicon-listeEssayer

glyphicon glyphicon-tablier-gaucheEssayer

glyphicon glyphicon-tablier-droiteEssayer

glyphicon glyphicon-facetime-videoEssayer

glyphicon glyphicon-imageEssayer

glyphicon glyphicon-carte-marqueurEssayer

glyphicon glyphicon-ajusterEssayer

glyphicon glyphicon-teinteEssayer

glyphicon glyphicon-éditerEssayer

glyphicon glyphicon-partagerEssayer

glyphicon glyphicon-cocherEssayer

glyphicon glyphicon-déplacerEssayer

glyphicon glyphicon-étape-retournerEssayer

glyphicon glyphicon-rapide-retournerEssayer

glyphicon glyphicon-retournerEssayer

glyphicon glyphicon-jouerEssayer

glyphicon glyphicon-pauseEssayer

glyphicon glyphicon-arrêterEssayer

glyphicon glyphicon-avancerEssayer

glyphicon glyphicon-rapide-avancerEssayer

glyphicon glyphicon-étape-avancerEssayer

glyphicon glyphicon-éjecterEssayer

glyphicon glyphicon-flèche inversée-gaucheEssayer

glyphicon glyphicon-flèche inversée-droiteEssayer

glyphicon glyphicon-plus-signeEssayer

glyphicon glyphicon-moins-signeEssayer

glyphicon glyphicon-supprimer-signeEssayer

glyphicon glyphicon-d'accord-signeEssayer

glyphicon glyphicon-question-signeEssayer

glyphicon glyphicon-information-signeEssayer

glyphicon glyphicon-capture d'écranEssayer

glyphicon glyphicon-supprimer-cercleEssayer

glyphicon glyphicon-d'accord-cercleEssayer

glyphicon glyphicon-bannir-cercleEssayer

glyphicon glyphicon-flèche-gaucheEssayer

glyphicon glyphicon-flèche-droiteEssayer

glyphicon glyphicon-flèche-hautEssayer

glyphicon glyphicon-flèche-basEssayer

glyphicon glyphicon-partager-altEssayer

glyphicon glyphicon-redimensionner-completEssayer

glyphicon glyphicon-redimensionner-petitEssayer

glyphicon glyphicon-exclamation-signeEssayer

glyphicon glyphicon-cadeauEssayer

glyphicon glyphicon-feuilleEssayer

glyphicon glyphicon-feuEssayer

glyphicon glyphicon-œil-ouvrirEssayer

glyphicon glyphicon-œil-fermerEssayer

glyphicon glyphicon-avertissement-signeEssayer

glyphicon glyphicon-avionEssayer

glyphicon glyphicon-calendrierEssayer

glyphicon glyphicon-aléatoireEssayer

glyphicon glyphicon-commentaireEssayer

glyphicon glyphicon-aimantEssayer

glyphicon glyphicon-flèche inversée-hautEssayer

glyphicon glyphicon-flèche inversée-basEssayer

glyphicon glyphicon-retweeterEssayer

glyphicon glyphicon-achat-panierEssayer

glyphicon glyphicon-dossier-fermerEssayer

glyphicon glyphicon-dossier-ouvrirEssayer

glyphicon glyphicon-redimensionner-verticaleEssayer

glyphicon glyphicon-redimensionner-horizontaleEssayer

glyphicon glyphicon-DDEssayer

glyphicon glyphicon-haut-parleurEssayer

glyphicon glyphicon-sonnetteEssayer

glyphicon glyphicon-certificatEssayer

glyphicon glyphicon-doigts-hautEssayer

glyphicon glyphicon-doigts-basEssayer

glyphicon glyphicon-main-droiteEssayer

glyphicon glyphicon-main-gaucheEssayer

glyphicon glyphicon-main-hautEssayer

glyphicon glyphicon-main-basEssayer

glyphicon glyphicon-cercle-flèche-droiteEssayer

glyphicon glyphicon-cercle-flèche-gaucheEssayer

glyphicon glyphicon-cercle-flèche-hautEssayer

glyphicon glyphicon-cercle-flèche-basEssayer

glyphicon glyphicon-globeEssayer

glyphicon glyphicon-visEssayer

glyphicon glyphicon-tâchesEssayer

glyphicon glyphicon-filtreEssayer

glyphicon glyphicon-sac à dosEssayer

glyphicon glyphicon-plein écranEssayer

glyphicon glyphicon-tableau de bordEssayer

glyphicon glyphicon-porte-plumeEssayer

glyphicon glyphicon-cœur-videEssayer

glyphicon glyphicon-lienEssayer

glyphicon glyphicon-téléphoneEssayer

glyphicon glyphicon-épingletteEssayer

glyphicon glyphicon-USDEssayer

glyphicon glyphicon-GBPEssayer

glyphicon glyphicon-classerEssayer

glyphicon glyphicon-classer-par-alphabetEssayer

glyphicon glyphicon-classer-par-alphabet-altEssayer

glyphicon glyphicon-classer-par-commandeEssayer

glyphicon glyphicon-classer-par-commande-altEssayer

glyphicon glyphicon-classer-par-attributsEssayer

glyphicon glyphicon-classer-par-attributs-altEssayer

glyphicon glyphicon-désactivéEssayer

glyphicon glyphicon-étendreEssayer

glyphicon glyphicon-effondrement-basEssayer

glyphicon glyphicon-effondrement-hautEssayer

glyphicon glyphicon-journal-dansEssayer

glyphicon glyphicon-flashEssayer

glyphicon glyphicon-journal-dehorsEssayer

glyphicon glyphicon-nouveau-fenêtreEssayer

glyphicon glyphicon-enregistrerEssayer

glyphicon glyphicon-enregistrerEssayer

glyphicon glyphicon-ouvrirEssayer

glyphicon glyphicon-enregistréEssayer

glyphicon glyphicon-importerEssayer

glyphicon glyphicon-exporterEssayer

glyphicon glyphicon-envoyerEssayer

glyphicon glyphicon-disquette-disqueEssayer

glyphicon glyphicon-disquette-enregistréEssayer

glyphicon glyphicon-disquette-supprimerEssayer

glyphicon glyphicon-disquette-enregistrerEssayer

glyphicon glyphicon-disquette-ouvrirEssayer

glyphicon glyphicon-carte de crédit-carteEssayer

glyphicon glyphicon-transférerEssayer

glyphicon glyphicon-ustensiles de cuisineEssayer

glyphicon glyphicon-en-têteEssayer

glyphicon glyphicon-compriméEssayer

glyphicon glyphicon-écouteurEssayer

glyphicon glyphicon-téléphone-altEssayer

glyphicon glyphicon-tourEssayer

glyphicon glyphicon-statsEssayer

glyphicon glyphicon-sd-videoEssayer

glyphicon glyphicon-hd-videoEssayer

glyphicon glyphicon-sous-titresEssayer

glyphicon glyphicon-sound-stereoEssayer

glyphicon glyphicon-sound-dolbyEssayer

glyphicon glyphicon-sound-5-1Essayer

glyphicon glyphicon-sound-6-1Essayer

glyphicon glyphicon-sound-7-1Essayer

glyphicon glyphicon-copyright-markEssayer

glyphicon glyphicon-registration-markEssayer

glyphicon glyphicon-cloud-downloadEssayer

glyphicon glyphicon-cloud-uploadEssayer

glyphicon glyphicon-tree-coniferEssayer

glyphicon glyphicon-tree-deciduousEssayer
Menu deroulant BootstrapOutils utiles responsifs Bootstrap