Do not speak Portuguese? Translate this site with Google or Bing Translator

Artigos - Artigos e dicas feito com PHP + Laravel

Desenvolvedor completamente apaixonado por tecnologia.

Font Awesome Icons (fa fa-calendar)
Font Awesome Icons (fa fa-calendar)

Posted on: August 29, 2018 12:18 PM

Posted by: Renato

Categories: Variados

Views: 1291

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 .

Ícones básicos

Ver menos SASS

 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.

Ícones maiores

 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-2x, fa-3x, fa-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.

Ícones de largura fixa

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

  • Listar ícones
  • pode ser usado
  • como balas
  • em listas
Use fa-ule fa-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>

Bordered & Pulled Icons

(…) 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-bordere fa-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.

Ícones animados

 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-spinner, fa-refreshe fa-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.

Rodado e invertido

  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-*e 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

Ícones empilhados

 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

Exemplos do Bootstrap 3

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>

CSS customizado

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 )
Acessibilidade-Minded
    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"&gt; </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

 


2

Share

Donate to Site


About Author

Renato

Developer

Add a Comment
Comments 0 Comments

No comments yet! Be the first to comment

Blog Search

Categories

OUTROS (16) Variados (109) PHP (133) Laravel (171) Black Hat (3) front-end (29) linux (114) postgresql (39) Docker (28) rest (5) soap (1) webservice (6) October (1) CMS (2) node (7) backend (13) ubuntu (56) devops (25) nodejs (5) npm (3) nvm (1) git (8) firefox (1) react (7) reactnative (5) collections (1) javascript (7) reactjs (8) yarn (0) adb (1) Solid (2) blade (3) models (1) controllers (0) log (1) html (2) hardware (3) aws (14) Transcribe (2) transcription (1) google (4) ibm (1) nuance (1) PHP Swoole (5) mysql (31) macox (4) flutter (1) symfony (1) cor (1) colors (2) homeOffice (2) jobs (3) imagick (2) ec2 (1) sw (1) websocket (2) markdown (1) ckeditor (1) tecnologia (14) faceapp (1) eloquent (14) query (4) sql (40) ddd (3) nginx (9) apache (4) certbot (1) lets-encrypt (3) debian (12) liquid (1) magento (2) ruby (1) LETSENCRYPT (1) Fibonacci (1) wine (1) transaction (1) pendrive (1) boot (1) usb (1) prf (1) policia (2) federal (1) lucena (1) mongodb (4) paypal (1) payment (1) zend (1) vim (4) ciencia (6) js (1) nosql (1) java (1) JasperReports (1) phpjasper (1) covid19 (1) saude (1) athena (1) cinnamon (1) phpunit (2) binaural (1) mysqli (3) database (42) windows (6) vala (1) json (2) oracle (1) mariadb (4) dev (12) webdev (24) s3 (4) storage (1) kitematic (1) gnome (2) web (2) intel (3) piada (1) cron (2) dba (18) lumen (1) ffmpeg (2) android (2) aplicativo (1) fedora (2) shell (4) bash (3) script (3) lider (1) htm (1) csv (1) dropbox (1) db (3) combustivel (2) haru (1) presenter (1) gasolina (1) MeioAmbiente (1) Grunt (1) biologia (1) programming (22) performance (3) brain (1) smartphones (1) telefonia (1) privacidade (1) opensource (3) microg (1) iode (1) ssh (3) zsh (2) terminal (3) dracula (1) spaceship (1) mac (2) idiomas (1) laptop (2) developer (37) api (5) data (1) matematica (1) seguranca (2) 100DaysOfCode (9) hotfix (1) documentation (1) laravelphp (10) RabbitMQ (3) Elasticsearch (1) redis (2) Raspberry (4) Padrao de design (4) JQuery (1) angularjs (4) Dicas (43) Kubernetes (3) vscode (2) backup (1) angular (3) servers (2) pipelines (1) AppSec (1) DevSecOps (4) rust (1) RustLang (1) Mozilla (1) algoritimo (1) sqlite (1) Passport (2) jwt (5) security (2) translate (1) kube (2) iot (1) politica (2) bolsonaro (1) flow (1) podcast (1) Brasil (1) containers (3) traefik (1) networking (1) host (1) POO (2) microservices (2) bug (1) cqrs (1) arquitetura (3) Architecture (4) sail (3) militar (1) artigo (1) economia (1) forcas armadas (1) ffaa (1) autenticacao (2) autorizacao (2) authentication (4) authorization (3) NoCookies (1) wsl (4) memcached (1) macos (2) unix (2) kali-linux (1) linux-tools (5) apple (1) noticias (2) composer (1) rancher (1) k8s (1) escopos (1) orm (1) jenkins (4) github (5) gitlab (3) queue (1) Passwordless (1) sonarqube (1) phpswoole (1) laraveloctane (1) Swoole (1) Swoole (1) octane (1) Structurizr (1) Diagramas (1) c4 (1) c4-models (1) compactar (1) compression (1) messaging (1) restfull (1) eventdrive (1) services (1) http (1) Monolith (1) microservice (1) historia (1) educacao (1) cavalotroia (1) OOD (0) odd (1) chatgpt (1) openai (3) vicuna (1) llama (1) gpt (1) transformers (1) pytorch (1) tensorflow (1) akitando (1) ia (1) nvidia (1) agi (1) guard (1) multiple_authen (2) rpi (1) auth (1) auth (1) livros (2) ElonMusk (2) Oh My Zsh (1) Manjaro (1) BigLinux (2) ArchLinux (1) Migration (1) Error (1) Monitor (1) Filament (1) LaravelFilament (1) replication (1) phpfpm (1) cache (1) vpn (1) l2tp (1) zorin-os (1) optimization (1) scheduling (1) monitoring (2) linkedin (1) community (1) inteligencia-artificial (2) wsl2 (1) maps (1) API_KEY_GOOGLE_MAPS (1) repmgr (1) altadisponibilidade (1) banco (1) modelagemdedados (1) inteligenciadedados (4) governancadedados (1) bancodedados (2) Observability (1) picpay (1) ecommerce (1) Curisidades (1) Samurai (1) KubeCon (1) GitOps (1) Axios (1) Fetch (1) Deepin (1) vue (4) nuxt (1) PKCE (1) Oauth2 (2) webhook (1) TypeScript (1) tailwind (1) gource (2)

New Articles


Get Latest Updates by Email