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

Tutoriales básicos de Bootstrap

Plugins de Bootstrap

Iconos de fuente Bootstrap (Glyphicons)

Este capítulo explicará los íconos de fuente (Glyphicons) y aprenderá su uso a través de algunos ejemplos. Bootstrap incluye 2más de 00 formatos de tipografías. Primero, permítenos entender qué son los íconos de fuente.

¿Qué son los íconos de fuente?

Los íconos de fuente son tipografías utilizadas en proyectos web. Aunque,Glyphicons Halflings se necesita una licencia comercial, pero puedes usar estos íconos gratuitamente basándote en Bootstrap del proyecto.

Para expresar agradecimiento al autor de los íconos, esperamos que agregues el enlace al sitio web GLYPHICONS al usarlos.

obtener íconos de fuente

Ya hemos instalación del entorno la sección descargó Bootstrap 3versión .x y entender su estructura de directorio. En fonts En el directorio se pueden encontrar los íconos de fuente, que incluyen los siguientes archivos:

  • glyphicons-halflings-regular.eot

  • glyphicons-halflings-regular.svg

  • glyphicons-halflings-regular.ttf

  • glyphicons-halflings-regular.woff

las reglas CSS relacionadas se escriben en dist El directorio del archivo css dentro del directorio del archivo bootstrap.css bootstrap.css bootstrap-和 min.css

文件上。

字体图标列表

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

CSS 规则解释

下面的 CSS 规则构成 glyphicon class。

结果如下所示：

带有字体图标的导航栏

示例
<!DOCTYPE html>
<html>
	<head>-8<meta charset="utf
　　　　">/<title>导航栏的字形图标<
　　　　title>-<meta name="viewport" content="width=device-width, initial1scale=
　　　　<!--　.0">　--">
　　　　Bootstrap//cdn.staticfile.org/twitter-bootstrap/3.3.7/<link rel="stylesheet" href="https:/css　　
bootstrap.min.css">
　<style>
	top:-body {　5left:
　　　　top:-padding　5left:
0px;
</}
<!--style>　9[if lt IE
	<script　src="https://]>/apps.bdimg.com/shiv5libs/3.7/shiv5html/script>
shiv.min.js"><--">
</<![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-collapse">
				target=".navbar-<span class="sr/bar"><
				only">Toggle navigation<-<span class="icon/bar"><
				only">Toggle navigation<-<span class="icon/bar"><
				only">Toggle navigation<-<span class="icon/bar"><
			</button>
			span>-<a class="navbar/a>
		</div>
		<div class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="#"><span class="glyphicon glyphicon-home>/span>　Inicio</a></li>
				<li><a　href="#shop"><span　class="glyphicon　glyphicon-compras-carrito>/span>　Tienda</a></li>
				<li><a　href="#support"><span　class="glyphicon　glyphicon-auriculares>/span>　Soporte</a></li>
			</ul>
		</div><!--　/.nav-colapsar　--">
	</div><!--　/.container　--">
</div>
<!--　jQuery　(los complementos de Bootstrap necesitan ser incluidos)　--">
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--　contiene todos los complementos compilados　--">
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
pruebe aquí ‹/›

personalizar iconos de fuente

Hemos visto cómo usar iconos de fuente, ahora veamos cómo personalizar los iconos de fuente.

Comenzaremos con el ejemplo anterior y personalizaremos los iconos mediante el cambio de tamaño de fuente, color y aplicación de sombra de texto.

A continuación, se muestra el código inicial:

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

el efecto se muestra a continuación:


personalizar tamaño de fuente

Al aumentar o disminuir el tamaño de la fuente de los iconos, puede hacer que los iconos se vean más grandes o más pequeños.

<button　type="button"　style="font-tamaño:　60px">
　　<span></span>　User
</button>


personalizar color de fuente

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

aplicar sombra de texto

<button　type="button"　style="text-sombra:　negro　5px　3px　3px;">
　　<span></span>　User
</button>

Personalización en línea de iconos de fuente

haga clic aquí para personalizar los iconos de fuente »

图标列表

图标类名实例

glyphicon glyphicon-asteriskIntente esto

glyphicon glyphicon-másIntente esto

glyphicon glyphicon-menosIntente esto

glyphicon glyphicon-euroIntente esto

glyphicon glyphicon-nubeIntente esto

glyphicon glyphicon-envelopeIntente esto

glyphicon glyphicon-pencilIntente esto

glyphicon glyphicon-glassIntente esto

glyphicon glyphicon-musicIntente esto

glyphicon glyphicon-searchIntente esto

glyphicon glyphicon-corazónIntente esto

glyphicon glyphicon-starIntente esto

glyphicon glyphicon-star-vacíoIntente esto

glyphicon glyphicon-userIntente esto

glyphicon glyphicon-filmIntente esto

glyphicon glyphicon-th-largeIntente esto

glyphicon glyphicon-thIntente esto

glyphicon glyphicon-th-listaIntente esto

glyphicon glyphicon-aceptarIntente esto

glyphicon glyphicon-eliminarIntente esto

glyphicon glyphicon-zoom-dentroIntente esto

glyphicon glyphicon-zoom-fueraIntente esto

glyphicon glyphicon-apagadoIntente esto

glyphicon glyphicon-signalIntente esto

glyphicon glyphicon-cogIntente esto

glyphicon glyphicon-trashIntente esto

glyphicon glyphicon-homeIntente esto

glyphicon glyphicon-fileIntente esto

glyphicon glyphicon-timeIntente esto

glyphicon glyphicon-roadIntente esto

glyphicon glyphicon-descargar-altIntente esto

glyphicon glyphicon-descargarIntente esto

glyphicon glyphicon-subirIntente esto

glyphicon glyphicon-inboxIntente esto

glyphicon glyphicon-reproducir-círculoIntente esto

glyphicon glyphicon-repetirIntente esto

glyphicon glyphicon-refrescarIntente esto

glyphicon glyphicon-lista-altIntente esto

glyphicon glyphicon-cerraduraIntente esto

glyphicon glyphicon-banderaIntente esto

glyphicon glyphicon-auricularesIntente esto

glyphicon glyphicon-volumen-apagadoIntente esto

glyphicon glyphicon-volumen-abajoIntente esto

glyphicon glyphicon-volumen-arribaIntente esto

glyphicon glyphicon-código QRIntente esto

glyphicon glyphicon-código de barrasIntente esto

glyphicon glyphicon-etiquetaIntente esto

glyphicon glyphicon-etiquetasIntente esto

glyphicon glyphicon-libroIntente esto

glyphicon glyphicon-marcapáginasIntente esto

glyphicon glyphicon-imprimirIntente esto

glyphicon glyphicon-cámaraIntente esto

glyphicon glyphicon-fuenteIntente esto

glyphicon glyphicon-negritaIntente esto

glyphicon glyphicon-cursivaIntente esto

glyphicon glyphicon-texto-altoIntente esto

glyphicon glyphicon-texto-anchoIntente esto

glyphicon glyphicon-alinear-izquierdaIntente esto

glyphicon glyphicon-alinear-centrarIntente esto

glyphicon glyphicon-alinear-derechaIntente esto

glyphicon glyphicon-alinear-justificarIntente esto

glyphicon glyphicon-listaIntente esto

glyphicon glyphicon-sangría-izquierdaIntente esto

glyphicon glyphicon-sangría-derechaIntente esto

glyphicon glyphicon-facetime-videoIntente esto

glyphicon glyphicon-imagenIntente esto

glyphicon glyphicon-mapa-marcadorIntente esto

glyphicon glyphicon-ajustarIntente esto

glyphicon glyphicon-tonoIntente esto

glyphicon glyphicon-editarIntente esto

glyphicon glyphicon-compartirIntente esto

glyphicon glyphicon-marcarIntente esto

glyphicon glyphicon-moverIntente esto

glyphicon glyphicon-paso-atrasIntente esto

glyphicon glyphicon-rápido-atrasIntente esto

glyphicon glyphicon-atrasIntente esto

glyphicon glyphicon-reproducirIntente esto

glyphicon glyphicon-pausaIntente esto

glyphicon glyphicon-detenerIntente esto

glyphicon glyphicon-adelanteIntente esto

glyphicon glyphicon-rápido-adelanteIntente esto

glyphicon glyphicon-paso-adelanteIntente esto

glyphicon glyphicon-ejectuarIntente esto

glyphicon glyphicon-flecha invertida-izquierdaIntente esto

glyphicon glyphicon-flecha invertida-derechaIntente esto

glyphicon glyphicon-más-firmarIntente esto

glyphicon glyphicon-menos-firmarIntente esto

glyphicon glyphicon-eliminar-firmarIntente esto

glyphicon glyphicon-aceptar-firmarIntente esto

glyphicon glyphicon-pregunta-firmarIntente esto

glyphicon glyphicon-información-firmarIntente esto

glyphicon glyphicon-captura de pantallaIntente esto

glyphicon glyphicon-eliminar-círculoIntente esto

glyphicon glyphicon-aceptar-círculoIntente esto

glyphicon glyphicon-prohibir-círculoIntente esto

glyphicon glyphicon-flecha-izquierdaIntente esto

glyphicon glyphicon-flecha-derechaIntente esto

glyphicon glyphicon-flecha-arribaIntente esto

glyphicon glyphicon-flecha-abajoIntente esto

glyphicon glyphicon-compartir-altIntente esto

glyphicon glyphicon-redimensionar-completoIntente esto

glyphicon glyphicon-redimensionar-pequeñoIntente esto

glyphicon glyphicon-exclamación-firmarIntente esto

glyphicon glyphicon-regaloIntente esto

glyphicon glyphicon-hojaIntente esto

glyphicon glyphicon-fuegoIntente esto

glyphicon glyphicon-ojo-abrirIntente esto

glyphicon glyphicon-ojo-cerrarIntente esto

glyphicon glyphicon-advertencia-firmarIntente esto

glyphicon glyphicon-aviónIntente esto

glyphicon glyphicon-calendarioIntente esto

glyphicon glyphicon-aleatorioIntente esto

glyphicon glyphicon-comentarioIntente esto

glyphicon glyphicon-imánIntente esto

glyphicon glyphicon-flecha invertida-arribaIntente esto

glyphicon glyphicon-flecha invertida-abajoIntente esto

glyphicon glyphicon-retuitearIntente esto

glyphicon glyphicon-compras-carroIntente esto

glyphicon glyphicon-carpeta-cerrarIntente esto

glyphicon glyphicon-carpeta-abrirIntente esto

glyphicon glyphicon-redimensionar-verticalIntente esto

glyphicon glyphicon-redimensionar-horizontalIntente esto

glyphicon glyphicon-hddIntente esto

glyphicon glyphicon-megáfonoIntente esto

glyphicon glyphicon-campanaIntente esto

glyphicon glyphicon-certificadoIntente esto

glyphicon glyphicon-pulgar-arribaIntente esto

glyphicon glyphicon-pulgar-abajoIntente esto

glyphicon glyphicon-mano-derechaIntente esto

glyphicon glyphicon-mano-izquierdaIntente esto

glyphicon glyphicon-mano-arribaIntente esto

glyphicon glyphicon-mano-abajoIntente esto

glyphicon glyphicon-círculo-flecha-derechaIntente esto

glyphicon glyphicon-círculo-flecha-izquierdaIntente esto

glyphicon glyphicon-círculo-flecha-arribaIntente esto

glyphicon glyphicon-círculo-flecha-abajoIntente esto

glyphicon glyphicon-globoIntente esto

glyphicon glyphicon-llave inglesaIntente esto

glyphicon glyphicon-tareasIntente esto

glyphicon glyphicon-filtroIntente esto

glyphicon glyphicon-maletínIntente esto

glyphicon glyphicon-pantalla completaIntente esto

glyphicon glyphicon-tablero de instrumentosIntente esto

glyphicon glyphicon-clip de papelIntente esto

glyphicon glyphicon-corazón-vacíoIntente esto

glyphicon glyphicon-enlaceIntente esto

glyphicon glyphicon-teléfonoIntente esto

glyphicon glyphicon-puntalIntente esto

glyphicon glyphicon-usdIntente esto

glyphicon glyphicon-gbpIntente esto

glyphicon glyphicon-ordenarIntente esto

glyphicon glyphicon-ordenar-por-alfabéticoIntente esto

glyphicon glyphicon-ordenar-por-alfabético-altIntente esto

glyphicon glyphicon-ordenar-por-ordenIntente esto

glyphicon glyphicon-ordenar-por-orden-altIntente esto

glyphicon glyphicon-ordenar-por-atributosIntente esto

glyphicon glyphicon-ordenar-por-atributos-altIntente esto

glyphicon glyphicon-no marcadoIntente esto

glyphicon glyphicon-expandirIntente esto

glyphicon glyphicon-colapsar-abajoIntente esto

glyphicon glyphicon-colapsar-arribaIntente esto

glyphicon glyphicon-registro-dentroIntente esto

glyphicon glyphicon-disco flashIntente esto

glyphicon glyphicon-registro-fueraIntente esto

glyphicon glyphicon-nuevo-ventanaIntente esto

glyphicon glyphicon-registroIntente esto

glyphicon glyphicon-guardarIntente esto

glyphicon glyphicon-abrirIntente esto

glyphicon glyphicon-guardadoIntente esto

glyphicon glyphicon-importarIntente esto

glyphicon glyphicon-exportarIntente esto

glyphicon glyphicon-enviarIntente esto

glyphicon glyphicon-disquette-discoIntente esto

glyphicon glyphicon-disquette-guardadoIntente esto

glyphicon glyphicon-disquette-eliminarIntente esto

glyphicon glyphicon-disquette-guardarIntente esto

glyphicon glyphicon-disquette-abrirIntente esto

glyphicon glyphicon-crédito-tarjetaIntente esto

glyphicon glyphicon-transferirIntente esto

glyphicon glyphicon-utensiliosIntente esto

glyphicon glyphicon-cabeceraIntente esto

glyphicon glyphicon-comprimidoIntente esto

glyphicon glyphicon-auricularIntente esto

glyphicon glyphicon-teléfono-altIntente esto

glyphicon glyphicon-torreIntente esto

glyphicon glyphicon-estadísticasIntente esto

glyphicon glyphicon-definición estándar-videoIntente esto

glyphicon glyphicon-alta definición-videoIntente esto

glyphicon glyphicon-subtítulosIntente esto

glyphicon glyphicon-sonido-estéreoIntente esto

glyphicon glyphicon-sonido-dolbyIntente esto

glyphicon glyphicon-sonido-5-1Intente esto

glyphicon glyphicon-sonido-6-1Intente esto

glyphicon glyphicon-sonido-7-1Intente esto

glyphicon glyphicon-derechos de autor-marcarIntente esto

glyphicon glyphicon-registro-marcarIntente esto

glyphicon glyphicon-nube-descargarIntente esto

glyphicon glyphicon-nube-subirIntente esto

glyphicon glyphicon-árbol-coníferaIntente esto

glyphicon glyphicon-árbol-deciduousIntente esto
Menú desplegable BootstrapHerramientas útiles responsivas Bootstrap