ícone da fonte Bootstrap (Glyphicons)

Este capítulo irá explicar o ícone da fonte (Glyphicons), e alguns exemplos para entender o seu uso. formatos de fonte Bootstrap empacotado com mais de 200 glifos. Primeiro, vamos primeiro entender o que é o ícone da fonte.

O que é o ícone da fonte?

ícone Fontes é uma fonte ícone usado no projeto Web. Embora, halflings Glyphicons precisa de uma licença comercial, mas você pode com base no projeto de Bootstrap para uso gratuito esses ícones.

Para expressar gratidão ícone autor, eu espero que você adicione links de sites GLYPHICONS durante o uso.

Receba o ícone Fontes

Nós temos o ambiente instalado capítulos Baixe a versão Bootstrap 3.x, e compreender a sua estrutura de diretório. Nasfontesícones de pasta pode encontrar a fonte que contém esses arquivos a seguir:

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-Regular.ttf
• glyphicons-halflings-regular.woff

regras CSS relacionados escritas nobootstrap.csspasta pasta cssdisteinicialização-min.cssdentro do arquivo.

lista ícone fontes

Clique aqui para ver a lista de ícone de fontes disponíveis.

interpretação das regras CSS

A seguinte regra CSS constitui glyphicon classe.

@ Font-face {
  font-family: 'Glyphicons Halflings';
  src: url ( 'fontes ../ / glyphicons-halflings-regular.eot');
  src: url formato ( '../ #iefix fontes / glyphicons-halflings-regular.eot?') formato ( 'embedded-OpenType'), url ( '../ fontes / glyphicons-halflings-regular.woff') ( format 'woff'), url ( '../ fontes / glyphicons-halflings-Regular.ttf') ( 'TrueType'), url ( '../ fontes / glyphicons-halflings-regular.svg # glyphicons_halflingsregular') ( 'svg');
}

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-suavização: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -moz-OSX-font-suavização: tons de cinza;
}

Então regra font-face é de fato o lugar para encontrar declaração glyphicons font-family e localização.

classe .glyphicon declarar uma posição relativa deslocamento a partir do topo da 1px, rendida como inline-block, as fontes de instrução, disposições de estilo da fonte e font-weight é normal, ajuste a altura da linha para 1. Além disso, o uso de -webkit-font-suavização: antialiased e -moz-OSX-font-suavização: tons de cinza; obter consistência cross-browser.

Então, onde

.glyphicon: vazio {
  width: 1em;
}

glyphicon vazio.

Há 200 classes, cada classe para um ícone. Estas classe de formato comum é a seguinte:

.glyphicon-chave: antes de {
  content: "hexvalue";
}

Por exemplo, os ícones do usuário para usar, é classe da seguinte forma:

.glyphicon pelo usuário: antes de {
  content: "\ E008";
}

uso

Para usar um ícone, basta usar o código a seguir. Por favor, mantenha o espaço adequado entre ícones e texto.

<Span class = "glyphicon glyphicon-search"> </ span>

O exemplo a seguir demonstra como usar o ícone de fontes:

Os resultados são os seguintes:

ícone da fonte com a barra de navegação

ícone personalizado fontes

Vimos como usar o ícone de fontes, então vemos como personalizar o ícone de fontes.

Vamos iniciar o exemplo acima, alterando o tamanho da fonte, cor e aplicar a sombra do texto a ser ícone personalizado.

Aqui está o código começa:

<Button type = "button" class = "btn btn-primário btn-lg">
  <Span class = "glyphicon glyphicon-user"> </ span> Usuário
</ Button>

O efeito é o seguinte:

Tamanho personalizado Font

Aumentando ou diminuindo o tamanho da fonte do ícone, você pode fazer o ícone pareça maior ou menor.

<Button type = class = "button" "btn btn-primário btn-lg" style = "font-size: 60px">
  <Span class = "glyphicon glyphicon-user"> </ span> Usuário
</ Button>

fonte personalizada cor

<Button type = "button" class = "btn btn-primário btn-lg" style = "color: rgb (212, 106, 64);">
  <Span class = "glyphicon glyphicon-user"> </ span> Usuário
</ Button>

Aplique sombra de texto

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

ícone de fonte personalizada on-line

Clique aqui para personalizar o ícone da fonte >>

lista de ícones