Como usar a Fonte Awesome CDN

Lista de ícones CDN de fontes fantásticas

Neste tutorial aprenderemos como utilizar os ícones font awesome servindo-os a partir de font awesome cdn.

A utilização de CDN(Content delivery Network) é a melhor forma de servir ficheiros css ou js de ícones font awesome, em vez de os alojar a partir dos nossos próprios servidores.

Passos a utilizar font awesome CDN

  1. Abrir website oficial font awesome ícone.

  2. Obtenha um código de incorporação único introduzindo o seu e-mail seguindo este link.

  3. Depois font awesome envia um e-mail com a fonte Awesome CDN embed code juntamente com instruções para adicionar ícones no nosso website.

  4. A amostra do JavaScript font awesome CDN link estará no formato abaixo.https://use.fontawesome.com/a34asdfsd.js.

  5. Copie o código incorporado que recebeu via e-mail e coloque-o no seu HTML <head> etiqueta

font awesome cdn embed code

font awesome cdn embed code

font awesome cdn register

font awesome cdn register

Aqui está a página web de amostra que utiliza font awesome CDN.

<!doctype html>
<html>
  <head>
    ...
    <!-- font awesome CDN Url -->
    <script src="https://use.fontawesome.com/your-embed-code.js"></script> 
    <!-- TODO: Place your own Font Awesome CDN embed code received via email  -->
    ...
  </head>
  <body>
    ...
    <i class="fa fa-home"></i>
    ...
  </body>
</html>

Além disso, podemos registar-nos em font awesome CDN website para gerir as nossas preferências.

Vantagens de usar font awesome CDN

  1. Um servidor mais rápido de onde podemos servir font awesome ícones.
  2. font awesome Servidores CDN sempre a funcionar.
  3. E os ficheiros serão servidos a partir do servidor CDN mais próximo.
  4. Podemos actualizar rapidamente para font awesome ícones profissionais sem qualquer alteração de código do nosso lado.
  5. Podemos criar múltiplos códigos de incorporação para diferentes websites.
  6. A fonte Awesome CDN pode carregar os seus ícones de forma assíncrona, aumentando ainda mais o desempenho do Sítio.

Mais uma grande vantagem de usar font awesome CDN é que podemos automatizar a acessibilidade do nosso ícone.

A característica de acessibilidade automática da fonte Awesome CDN ajuda as pessoas com deficiências visuais e auditivas.

Por exemplo, considere o exemplo abaixo

<button type="submit">
  <i class="fa fa-envelope"></i> Email Us!
</button>

No exemplo acima, no interior do botão submeter estamos a utilizar o ícone font awesome. Mas para a pessoa com deficiência visual que utiliza leitores de ecrã para aceder ao sítio web, não é necessário expor estes ícones.

Assim, font awesome CDN adicionará automaticamente o atributo aria-hidden=true ao ícone.

<button type="submit">
  <i class="fa fa-envelope" aria-hidden=”true”></i> Email Us!
</button>

font awesome 5 CDN

Para além do acima referido font awesome CDN oficial, podemos utilizar a versão gratuita dos ícones font awesome utilizando redes de entrega de conteúdos como cdnjs, maxcdn e jsdelivr.

Font awesome CDN by cdn js

Para a última versão font awesome 5 e superior, utilize as ligações abaixo font awesome CDN CSS file links by cdnjs.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/brands.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/brands.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/regular.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/regular.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/solid.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/svg-with-js.min.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/v4-shims.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/v4-shims.min.css

Se quiser utilizar a versão Javascript de font awesome ícones, utilize as ligações CDN abaixo, da cdnjs.

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/brands.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/brands.min.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/conflict-detection.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/conflict-detection.min.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/fontawesome.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/fontawesome.min.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/regular.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/regular.min.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/solid.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/solid.min.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/v4-shims.js
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/v4-shims.min.js

Para as últimas versões do fontawesome CDN consulte abaixo cdnjs link por cloudflare.

https://cdnjs.com/libraries/font-awesome

Servir font awesome ficheiros CSS de ícones usando abaixo as ligações jsdelivr CDN.

https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/all.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/all.min.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/brands.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/brands.min.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/fontawesome.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/fontawesome.min.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/regular.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/regular.min.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/solid.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/solid.min.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/svg-with-js.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/svg-with-js.min.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/v4-shims.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/css/v4-shims.min.css
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.1/css/all.min.css

Para os fantásticos ficheiros CDN javascript da Font, utilize os links abaixo.

https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/all.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/all.min.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/brands.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/brands.min.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/conflict-detection.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/conflict-detection.min.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/fontawesome.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/fontawesome.min.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/regular.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/regular.min.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/solid.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/solid.min.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/v4-shims.js
https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome@5.15.3/js/v4-shims.min.js

Aqui está o link para o último fontawesome CDN jsdelivr.

https://www.jsdelivr.com/package/gh/FortAwesome/Font-Awesome

Para a versão anterior como font awesome 4.7 podemos usar links bootstap cdn

https://www.bootstrapcdn.com/fontawesome/

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Previous:
Avatar

Arunkumar Gudelli

Liked this post? Subscribe
⭐Please star Angular Wiki on GitHub! ↗