Hoe Font Awesome CDN te gebruiken

Font awesome Icons CDN list

In deze tutorial leren we hoe we font awesome iconen kunnen gebruiken door ze te serveren vanaf font awesome cdn.

Het gebruik van CDN (Content Delivery Network) is de beste manier om font awesome icon css of js files te serveren, in plaats van ze te hosten op onze eigen servers.

Stappen om font awesome CDN te gebruiken

  1. Open de officiële font awesome icon website.

  2. Ontvang een unieke embed code door uw e-mail in te voeren via deze link.

  3. Dan stuurt font awesome een e-mail met de Font Awesome CDN insluitcode samen met instructies om pictogrammen toe te voegen aan onze website.

  4. Het voorbeeld JavaScript font awesome CDN link zal in onderstaand formaat zijn.https://use.fontawesome.com/a34asdfsd.js.

  5. Kopieer de embed-code die u via e-mail hebt ontvangen en plaats deze in uw HTML <head> tag

font awesome cdn embed code

font awesome cdn embed code

font awesome cdn register

font awesome cdn register

Hier is de voorbeeld webpagina die font awesome CDN gebruikt.

<!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>

Verder kunnen we ons registreren op font awesome CDN website om onze voorkeuren te beheren.

Voordelen van het gebruik van font awesome CDN

  1. Een snellere server vanwaar we font awesome icons kunnen serveren.
  2. font awesome CDN-servers altijd up and running.
  3. En de bestanden zullen worden geserveerd vanaf de dichtstbijzijnde CDN server.
  4. We kunnen snel upgraden naar font awesome pro icons zonder enige code veranderingen van onze kant.
  5. We kunnen meerdere embed codes maken voor verschillende websites.
  6. Font Awesome CDN kan laden uw pictogrammen asynchroon verder opvoeren van de Site Performance.

Nog een groot voordeel van het gebruik van font awesome CDN is dat we de toegankelijkheid van onze pictogrammen kunnen automatiseren.

De automatische toegankelijkheidsfunctie van Font Awesome CDN helpt mensen met gehoorproblemen of slechtziendheid.

Denk bijvoorbeeld aan het onderstaande voorbeeld

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

In het bovenstaande voorbeeld, gebruiken we font awesome icoontje in de submit knop. Maar voor visueel gehandicapten die schermlezers gebruiken om toegang te krijgen tot de website is het niet nodig om dit pictogram te tonen.

Dus font awesome CDN zal automatisch het aria-hidden=true attribuut toevoegen aan het pictogram.

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

font awesome 5 CDN

Naast de hierboven vermelde font awesome officiële CDN, kunnen we gratis versie van font awesome pictogrammen gebruiken door content delivery netwerken zoals cdnjs, maxcdn en jsdelivr te gebruiken.

Font awesome CDN door cdn js

Voor de nieuwste font awesome 5 versie en hoger gebruik de onderstaande font awesome CDN CSS-bestand links door 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

Als u Javascript versie van font awesome icons wilt gebruiken gebruik dan de onderstaande CDN links van 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

Voor de nieuwste fontawesome CDN-versies raadpleegt u de onderstaande cdnjs link van cloudflare.

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

Serveer font awesome icons CSS bestanden met behulp van onderstaande jsdelivr CDN links.

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

Voor Font awesome CDN javascript bestanden links gebruik onderstaande.

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

Hier is de link naar de nieuwste jsdelivr fontawesome CDN.

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

Voor de eerdere versie zoals font awesome 4.7 kunnen we bootstap cdn links gebruiken

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! ↗