Sådan bruger du Font Awesome CDN

Font awesome Icons CDN-liste

I denne vejledning lærer vi at bruge font awesome ikoner ved at servere dem fra font awesome cdn.

Brug af CDN (Content delivery Network) er den bedste måde at servere font awesome ikon css eller js filer på, i stedet for at hoste dem fra vores egne servere.

Trin for at bruge font awesome CDN

  1. Åbn det officielle font awesome ikonwebsted.

  2. Få en unik indlejringskode ved at indtaste din e-mail ved at følge dette link.

  3. Derefter sender font awesome en e-mail med Font Awesome CDN-embed-kode sammen med instruktioner til at tilføje ikoner på vores websted.

  4. Eksemplet på JavaScript font awesome CDN-linket vil være i nedenstående format.https://use.fontawesome.com/a34asdfsd.js.

  5. Kopier den indlejringskode, du har modtaget via e-mail, og placer den i din HTML <head> tag

font awesome cdn embed code

font awesome cdn embed code

font awesome cdn register

font awesome cdn register

Her er et eksempel på en webside, der bruger 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>

Desuden kan vi registrere os på font awesome CDN-webstedet for at administrere vores præferencer.

Fordele ved at bruge font awesome CDN

  1. En hurtigere server, hvorfra vi kan servere font awesome ikoner.
  2. font awesome CDN-servere er altid oppe og kører.
  3. Og filerne vil blive serveret fra den nærmeste CDN-server.
  4. Vi kan hurtigt opgradere til font awesome pro ikoner uden kodeændringer fra vores side.
  5. Vi kan oprette flere indlejringskoder til forskellige websteder.
  6. Font Awesome CDN kan indlæse dine ikoner asynkront og yderligere øge webstedets ydeevne.

En anden stor fordel ved at bruge font awesome CDN er, at vi kan automatisere vores ikoners tilgængelighed.

Font Awesome CDN’s automatiske tilgængelighedsfunktion hjælper folk med syns- og høreproblemer.

Se f.eks. nedenstående eksempel

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

I ovenstående eksempel bruger vi font awesome ikonet inde i indsendelsesknappen. Men for synshandicappede personer, der bruger skærmlæsere til at få adgang til webstedet, er det ikke nødvendigt at udsætte dette ikon.

Så font awesome CDN vil automatisk tilføje aria-hidden=true -attributten til ikonet.

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

font awesome 5 CDN

Ud over ovenstående font awesome officielle CDN kan vi bruge den gratis version af font awesome ikoner ved hjælp af content delivery networks som cdnjs, maxcdn og jsdelivr.

Font awesome CDN af cdn js

For den nyeste font awesome 5 version og derover skal du bruge nedenstående font awesome CDN CSS-fillinks fra 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

Hvis du ønsker at bruge Javascript-versionen af font awesome ikoner, skal du bruge nedenstående CDN-links fra 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

For de nyeste fontawesome CDN-versioner henvises til nedenstående cdnjs-link fra cloudflare.

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

Server font awesome icons CSS-filer ved hjælp af nedenstående 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

Brug nedenstående links til Font awesome CDN javascript-filer.

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

Her er linket til den seneste jsdelivr fontawesome CDN.

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

For den tidligere version som font awesome 4.7 kan vi bruge bootstap cdn links

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

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

Arunkumar Gudelli

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