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

Tutorial básico do Bootstrap

Plugins do Bootstrap

Ícones de Fonte Bootstrap (Glyphicons)

Este capítulo explicará os ícones de fontes (Glyphicons) e compreenderá seu uso por meio de alguns exemplos. O Bootstrap inclui 2Mais de 00 formatos de fontes de pincel. Primeiro, vamos entender o que são ícones de fontes.

O que são ícones de fontes?

Os ícones de fontes são fontes de ícones usados em projetos da Web. EmboraGlyphicons Halflings é necessário uma licença comercial, mas você pode usar esses ícones gratuitamente com base no Bootstrap do projeto.

Para expressar gratidão aos autores dos ícones, esperamos que você inclua o link do site GLYPHICONS ao usá-los.

Obter ícones de fontes

Já instalamos Instalação do ambiente Seção baixou o Bootstrap 3versão .x e compreender sua estrutura de diretórios. No fonts Você pode encontrar ícones de fontes no diretório, que contêm os seguintes arquivos:

  • glyphicons-halflings-regular.eot

  • glyphicons-halflings-regular.svg

  • glyphicons-halflings-regular.ttf

  • glyphicons-halflings-regular.woff

As regras CSS relacionadas estão escritas em dist O diretório do css dentro do diretório css 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"><
			</botão>
			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-casa/span>　Casa</a></li>
				<li><a　href="#shop"><span　class="glyphicon　glyphicon-compras-cesta></span>　Comércio</a></li>
				<li><a　href="#support"><span　class="glyphicon　glyphicon-fones_de_ouvido></span>　Suporte</a></li>
			</ul>
		</div><!--　/.nav-colapsar　-->
	</div><!--　/.container　-->
</div>
<!--　jQuery　(Os plugins do Bootstrap precisam ser incluídos)　-->
<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<!--　contém todos os plugins compilados　-->
<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
teste e veja ‹/›

personalizar ícones de fontes

Já vimos como usar ícones de fontes, agora vamos ver como personalizar ícones de fontes.

Vamos começar com o exemplo acima e personalizar o ícone alterando o tamanho da fonte, cor e aplicando sombra de texto.

Aqui está o código inicial:

<button　type="button">
　　<span></span>　Usuário
</botão>

o efeito é mostrado abaixo:


personalizar tamanho da fonte

Através de aumentar ou diminuir o tamanho da fonte do ícone, você pode tornar o ícone maior ou menor.

<button　type="button"　style="font-tamanho:　60px">
　　<span></span>　Usuário
</botão>


personalizar cor da fonte

<button　type="button"　style="color:　rgb(212,　106,　64);">
　　<span></span>　Usuário
</botão>

aplicar sombra de texto

<button　type="button"　style="text-sombra:　preto　5px　3px　3px;">
　　<span></span>　Usuário
</botão>

personalização de ícones de fontes online

clique aqui para personalizar ícones de fontes »

lista_de_ícones

íconenome_da_classeinstância

glyphicon glyphicon-asteriskExperimente

glyphicon glyphicon-maisExperimente

glyphicon glyphicon-menosExperimente

glyphicon glyphicon-euroExperimente

glyphicon glyphicon-nuvemExperimente

glyphicon glyphicon-envelopeExperimente

glyphicon glyphicon-pencilExperimente

glyphicon glyphicon-glassExperimente

glyphicon glyphicon-musicExperimente

glyphicon glyphicon-searchExperimente

glyphicon glyphicon-coraçãoExperimente

glyphicon glyphicon-starExperimente

glyphicon glyphicon-star-vazioExperimente

glyphicon glyphicon-userExperimente

glyphicon glyphicon-filmExperimente

glyphicon glyphicon-th-largeExperimente

glyphicon glyphicon-thExperimente

glyphicon glyphicon-th-listaExperimente

glyphicon glyphicon-okExperimente

glyphicon glyphicon-removerExperimente

glyphicon glyphicon-zoom-dentroExperimente

glyphicon glyphicon-zoom-foraExperimente

glyphicon glyphicon-desligadoExperimente

glyphicon glyphicon-signalExperimente

glyphicon glyphicon-cogExperimente

glyphicon glyphicon-trashExperimente

glyphicon glyphicon-homeExperimente

glyphicon glyphicon-fileExperimente

glyphicon glyphicon-timeExperimente

glyphicon glyphicon-roadExperimente

glyphicon glyphicon-download-altExperimente

glyphicon glyphicon-downloadExperimente

glyphicon glyphicon-uploadExperimente

glyphicon glyphicon-inboxExperimente

glyphicon glyphicon-reproduzir-círculoExperimente

glyphicon glyphicon-repetirExperimente

glyphicon glyphicon-atualizarExperimente

glyphicon glyphicon-lista-altExperimente

glyphicon glyphicon-trancarExperimente

glyphicon glyphicon-bandeiraExperimente

glyphicon glyphicon-fones de ouvidoExperimente

glyphicon glyphicon-volume-desligadoExperimente

glyphicon glyphicon-volume-baixoExperimente

glyphicon glyphicon-volume-cimaExperimente

glyphicon glyphicon-QR codeExperimente

glyphicon glyphicon-código de barrasExperimente

glyphicon glyphicon-tagExperimente

glyphicon glyphicon-tagsExperimente

glyphicon glyphicon-livroExperimente

glyphicon glyphicon-favoritoExperimente

glyphicon glyphicon-imprimirExperimente

glyphicon glyphicon-câmaraExperimente

glyphicon glyphicon-fonteExperimente

glyphicon glyphicon-negritoExperimente

glyphicon glyphicon-itálicoExperimente

glyphicon glyphicon-texto-alturaExperimente

glyphicon glyphicon-texto-larguraExperimente

glyphicon glyphicon-alinhamento-esquerdaExperimente

glyphicon glyphicon-alinhamento-centroExperimente

glyphicon glyphicon-alinhamento-direitaExperimente

glyphicon glyphicon-alinhamento-justificarExperimente

glyphicon glyphicon-listaExperimente

glyphicon glyphicon-indentar-esquerdaExperimente

glyphicon glyphicon-indentar-direitaExperimente

glyphicon glyphicon-facetime-vídeoExperimente

glyphicon glyphicon-imagemExperimente

glyphicon glyphicon-mapa-marcadorExperimente

glyphicon glyphicon-ajustarExperimente

glyphicon glyphicon-tonalidadeExperimente

glyphicon glyphicon-editarExperimente

glyphicon glyphicon-compartilharExperimente

glyphicon glyphicon-marcarExperimente

glyphicon glyphicon-moverExperimente

glyphicon glyphicon-passo-VoltarExperimente

glyphicon glyphicon-rápido-VoltarExperimente

glyphicon glyphicon-VoltarExperimente

glyphicon glyphicon-reproduzirExperimente

glyphicon glyphicon-pausaExperimente

glyphicon glyphicon-pararExperimente

glyphicon glyphicon-avançarExperimente

glyphicon glyphicon-rápido-avançarExperimente

glyphicon glyphicon-passo-avançarExperimente

glyphicon glyphicon-ejectarExperimente

glyphicon glyphicon-seta de guia-esquerdaExperimente

glyphicon glyphicon-seta de guia-direitaExperimente

glyphicon glyphicon-mais-assinaturaExperimente

glyphicon glyphicon-menos-assinaturaExperimente

glyphicon glyphicon-remover-assinaturaExperimente

glyphicon glyphicon-ok-assinaturaExperimente

glyphicon glyphicon-pergunta-assinaturaExperimente

glyphicon glyphicon-informação-assinaturaExperimente

glyphicon glyphicon-print screenExperimente

glyphicon glyphicon-remover-círculoExperimente

glyphicon glyphicon-ok-círculoExperimente

glyphicon glyphicon-proibir-círculoExperimente

glyphicon glyphicon-seta-esquerdaExperimente

glyphicon glyphicon-seta-direitaExperimente

glyphicon glyphicon-seta-cimaExperimente

glyphicon glyphicon-seta-baixoExperimente

glyphicon glyphicon-compartilhar-altExperimente

glyphicon glyphicon-redimensionar-completoExperimente

glyphicon glyphicon-redimensionar-pequenoExperimente

glyphicon glyphicon-exclamação-assinaturaExperimente

glyphicon glyphicon-presenteExperimente

glyphicon glyphicon-folhaExperimente

glyphicon glyphicon-fogoExperimente

glyphicon glyphicon-olho-abrirExperimente

glyphicon glyphicon-olho-fecharExperimente

glyphicon glyphicon-aviso-assinaturaExperimente

glyphicon glyphicon-aviãoExperimente

glyphicon glyphicon-calendárioExperimente

glyphicon glyphicon-aleatórioExperimente

glyphicon glyphicon-comentárioExperimente

glyphicon glyphicon-magnetExperimente

glyphicon glyphicon-seta de guia-cimaExperimente

glyphicon glyphicon-seta de guia-baixoExperimente

glyphicon glyphicon-retweetExperimente

glyphicon glyphicon-compras-cestaExperimente

glyphicon glyphicon-pasta-fecharExperimente

glyphicon glyphicon-pasta-abrirExperimente

glyphicon glyphicon-redimensionar-verticalExperimente

glyphicon glyphicon-redimensionar-horizontalExperimente

glyphicon glyphicon-hddExperimente

glyphicon glyphicon-megafoneExperimente

glyphicon glyphicon-campainhaExperimente

glyphicon glyphicon-certificadoExperimente

glyphicon glyphicon-palmilha-cimaExperimente

glyphicon glyphicon-palmilha-baixoExperimente

glyphicon glyphicon-mão-direitaExperimente

glyphicon glyphicon-mão-esquerdaExperimente

glyphicon glyphicon-mão-cimaExperimente

glyphicon glyphicon-mão-baixoExperimente

glyphicon glyphicon-círculo-seta-direitaExperimente

glyphicon glyphicon-círculo-seta-esquerdaExperimente

glyphicon glyphicon-círculo-seta-cimaExperimente

glyphicon glyphicon-círculo-seta-baixoExperimente

glyphicon glyphicon-esferaExperimente

glyphicon glyphicon-chave de fendaExperimente

glyphicon glyphicon-tarefasExperimente

glyphicon glyphicon-filtroExperimente

glyphicon glyphicon-cestaExperimente

glyphicon glyphicon-tela cheiaExperimente

glyphicon glyphicon-painel de instrumentosExperimente

glyphicon glyphicon-Clips de papelExperimente

glyphicon glyphicon-coração-vazioExperimente

glyphicon glyphicon-ligaçãoExperimente

glyphicon glyphicon-telefoneExperimente

glyphicon glyphicon-pushpinExperimente

glyphicon glyphicon-usdExperimente

glyphicon glyphicon-gbpExperimente

glyphicon glyphicon-classificarExperimente

glyphicon glyphicon-classificar-por-alfabéticoExperimente

glyphicon glyphicon-classificar-por-alfabético-altExperimente

glyphicon glyphicon-classificar-por-ordemExperimente

glyphicon glyphicon-classificar-por-ordem-altExperimente

glyphicon glyphicon-classificar-por-atributosExperimente

glyphicon glyphicon-classificar-por-atributos-altExperimente

glyphicon glyphicon-desmarcadoExperimente

glyphicon glyphicon-expandirExperimente

glyphicon glyphicon-colapsar-baixoExperimente

glyphicon glyphicon-colapsar-cimaExperimente

glyphicon glyphicon-registro-dentroExperimente

glyphicon glyphicon-flashExperimente

glyphicon glyphicon-registro-foraExperimente

glyphicon glyphicon-novo-janelaExperimente

glyphicon glyphicon-gravarExperimente

glyphicon glyphicon-salvarExperimente

glyphicon glyphicon-abrirExperimente

glyphicon glyphicon-salvoExperimente

glyphicon glyphicon-importarExperimente

glyphicon glyphicon-exportarExperimente

glyphicon glyphicon-enviarExperimente

glyphicon glyphicon-disquete-discoExperimente

glyphicon glyphicon-disquete-salvoExperimente

glyphicon glyphicon-disquete-removerExperimente

glyphicon glyphicon-disquete-salvarExperimente

glyphicon glyphicon-disquete-abrirExperimente

glyphicon glyphicon-crédito-cartãoExperimente

glyphicon glyphicon-transferirExperimente

glyphicon glyphicon-utensílios de mesaExperimente

glyphicon glyphicon-cabeçoteExperimente

glyphicon glyphicon-comprimidoExperimente

glyphicon glyphicon-fones de ouvidoExperimente

glyphicon glyphicon-telefone-altExperimente

glyphicon glyphicon-torreExperimente

glyphicon glyphicon-estatísticasExperimente

glyphicon glyphicon-sd-vídeoExperimente

glyphicon glyphicon-hd-vídeoExperimente

glyphicon glyphicon-legendasExperimente

glyphicon glyphicon-som-estéreoExperimente

glyphicon glyphicon-som-dolbyExperimente

glyphicon glyphicon-som-5-1Experimente

glyphicon glyphicon-som-6-1Experimente

glyphicon glyphicon-som-7-1Experimente

glyphicon glyphicon-direitos autorais-marcarExperimente

glyphicon glyphicon-registro-marcarExperimente

glyphicon glyphicon-nuvem-downloadExperimente

glyphicon glyphicon-nuvem-uploadExperimente

glyphicon glyphicon-árvore-coníferaExperimente

glyphicon glyphicon-árvore-deciduousExperimente
Menu Suspensível BootstrapFerramentas Úteis Responivas Bootstrap