Font Awesome Icons (fa fa-calendar)

Depois de começar a trabalhar , você pode colocar os ícones do Font Awesome em qualquer lugar com a <i>tag. Alguns exemplos apreciativamente reutilizados da documentação do Bootstrap .

 Exemplo: ícone básicofa-camera-retro

Você pode colocar ícones de Font Awesome em qualquer lugar usando o Prefixo CSS fae o nome do ícone. O Font Awesome é projetado para ser usado com elementos inline (nós gostamos da <i>tag por questão de brevidade, mas usar um <span>é mais semanticamente correto).

<i class="fa fa-camera-retro"></i> fa-camera-retro
  • Exemplo: ícone básicoSe você alterar o tamanho da fonte do contêiner do ícone, o ícone ficará maior. As mesmas coisas valem para cor, sombreamento e qualquer outra coisa que seja herdada usando CSS.

 fa-lg

 fa-2x

 fa-3x

 fa-4x

 fa-5x

Para aumentar ícone tamanhos relativos ao seu recipiente, utilizar o fa-lg(aumento de 33%), fa-2xfa-3xfa-4x, ou fa-5xclasses.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
  • Se seus ícones estiverem sendo cortados na parte superior e inferior, verifique se você tem altura de linha suficiente.

Use fa-fwpara definir ícones em uma largura fixa. Ótimo para usar quando larguras de ícones diferentes fazem o alinhamento. Especialmente útil em coisas como listas de navegação e grupos de listas.

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp; Settings</a>
</div>
  • Listar ícones
  • pode ser usado
  • como balas
  • em listas

Use fa-ulfa-lisubstitua facilmente os marcadores padrão em listas não ordenadas.

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check-square"></i>List icons</li>
  <li><i class="fa-li fa fa-check-square"></i>can be used</li>
  <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
  <li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>

(…) Amanhã correremos mais rápido, esticaremos nossos braços ainda mais … E então uma bela manhã … Assim, continuamos a navegar contra os barcos, recuando incessantemente para o passado.

Use fa-borderfa-pull-rightou fa-pull-leftpara obter citações fáceis ou ícones de artigos.

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>
...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning&mdash; So we beat on, boats against the
current, borne back ceaselessly into the past.

 Exemplo de carregamento (com o ícone fa-spinner) Carregando (com o ícone fa-circle-o-notch) Exemplo de carregamento (com o ícone fa-refresh) Exemplo de carregamento (com o ícone fa-cog)Exemplo de carregamento (com o ícone fa-spinner)

Use a fa-spinclasse para girar qualquer ícone e use fa-pulsepara girar com 8 etapas. Funciona bem com fa-spinnerfa-refreshfa-cog.

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

Nota: Alguns navegadores em algumas plataformas apresentam problemas com ícones animados, resultando em um efeito tremido. Veja a questão 671 para exemplos e possíveis soluções alternativas.

Nota: As animações CSS3 não são suportadas no IE8 – IE9.

  normal
  fa-rotate-90
  girar-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

Para girar e virar os ícones arbitrariamente, use as classes fa-rotate-*fa-flip-*.

<i class="fa fa-shield"></i> normal<br>
<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br>
<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br>
<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br>
<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br>
<i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical
 fa-twitter no fa-square-o
 fa-bandeira no fa-circle
 fa-terminal na fa-square
 proibição de fa-câmera

Para empilhar vários ícones, use a fa-stackclasse no pai, o fa-stack-1x ícone de tamanho regular e fa-stack-2xo ícone maior. fa-inverse pode ser usado como uma cor de ícone alternativa. Você pode até mesmo jogar classes de ícones maiores no pai para obter mais controle sobre o dimensionamento.

<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-square-o<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
fa-flag on fa-circle<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
</span>
fa-terminal on fa-square<br>
<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>
fa-ban on fa-camera

O Font Awesome funciona muito bem com a gama completa de componentes do Bootstrap.

<a class="btn btn-danger" href="#">
  <i class="fa fa-trash-o fa-lg"></i> Delete</a>
<a class="btn btn-default btn-sm" href="#">
  <i class="fa fa-cog"></i> Settings</a>

<a class="btn btn-lg btn-success" href="#">
  <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version 4.7.0</a>

<div class="btn-group">
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-left" title="Align Left"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-center" title="Align Center"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-right" title="Align Right"></i>
  </a>
  <a class="btn btn-default" href="#">
    <i class="fa fa-align-justify" title="Align Justify"></i>
  </a>
</div>

<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>

<div class="btn-group open">
  <a class="btn btn-primary" href="#"><i class="fa fa-user fa-fw"></i> User</a>
  <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
    <span class="fa fa-caret-down" title="Toggle dropdown menu"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#"><i class="fa fa-pencil fa-fw"></i> Edit</a></li>
    <li><a href="#"><i class="fa fa-trash-o fa-fw"></i> Delete</a></li>
    <li><a href="#"><i class="fa fa-ban fa-fw"></i> Ban</a></li>
    <li class="divider"></li>
    <li><a href="#"><i class="fa fa-unlock"></i> Make admin</a></li>
  </ul>
</div>

Qualquer coisa que você pode fazer com estilos de fontes CSS, você pode fazer com o Font Awesome.

Classificações por estrelas (inspiradas em CSS Tricks )

  

 Refrescante…Salvando. Aguente firme!

Nível de bateria: 50%

Pensando na acessibilidade de ícones , se um ícone só adicionar uma decoração ou marca extra, ele não precisará ser anunciado para os usuários enquanto eles estiverem navegando em seu site ou aplicativo de forma auditiva. Alternativamente, se um ícone transmite significado em seu conteúdo ou interface, assegure-se de que esse significado também seja transmitido para tecnologias assistivas por meio de exibições ou texto alternativos.
<a class="btn btn-default" href="path/to/settings" aria-label="Settings">
  <i class="fa fa-cog" aria-hidden="true"></i>
</a>

<a class="btn btn-danger" href="path/to/settings" aria-label="Delete">
  <i class="fa fa-trash-o" aria-hidden="true"></i>
</a>

<a class="btn btn-primary" href="#navigation-main" aria-label="Skip to main navigation">
  <i class="fa fa-bars" aria-hidden="true"></i>
</a>
<i class="fa fa-refresh fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Refreshing...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw" aria-hidden="true"></i>
<span class="sr-only">Saving. Hang tight!</span>
<div class="input-group margin-bottom-sm">
  <span class="input-group-addon"><i class="fa fa-envelope-o fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="text" placeholder="Email address">
</div>
<div class="input-group">
  <span class="input-group-addon"><i class="fa fa-key fa-fw" aria-hidden="true"></i></span>
  <input class="form-control" type="password" placeholder="Password">
</div>
<a href="path/to/shopping/cart" class="btn btn-primary" aria-label="View 3 items in your shopping cart">
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<span class="sr-only">Battery level: 50%</span>

fa fa-calendar

Unicode:

´<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>
</head>
<body>

<h1>fa fa-calendar</h1>

<i class=”fa fa-calendar”></i>
<i class=”fa fa-calendar” style=”font-size:24px”></i>
<i class=”fa fa-calendar” style=”font-size:36px”></i>
<i class=”fa fa-calendar” style=”font-size:48px;color:red”></i>
<br>

<p>Used on a button:</p>
<button style=”font-size:24px”>Button <i class=”fa fa-calendar”></i></button>

<p>Unicode:</p>
<i style=”font-size:24px” class=”fa”>&#xf073;</i>

</body>
</html>´

 

Fontes:

https://fontawesome.com/v4.7.0/icon/calendar

 

Renato Lucena

Developer PHP, Laravel. Goiania-GO https://www.linkedin.com/in/renato-de-oliveira-lucena-33777133/

Você pode gostar...