Hur man använder Font Awesome CDN

Font awesome Icons CDN-lista

I den här handledningen lär vi oss hur man använder font awesome ikoner genom att servera dem från font awesome cdn.

Att använda CDN (Content delivery Network) är det bästa sättet att servera font awesome ikon css- eller js-filer, istället för att ha dem på våra egna servrar.

Steg för att använda font awesome CDN

  1. Öppna den officiella webbplatsen font awesome icon.

  2. Få en unik inbäddningskod genom att skriva in din e-postadress på följande länk.

  3. Sedan skickar font awesome ett e-postmeddelande med Font Awesome CDN-inbäddningskoden tillsammans med instruktioner för att lägga till ikoner på vår webbplats.

  4. Exempel på JavaScript font awesome CDN-länken kommer att vara i nedanstående format.https://use.fontawesome.com/a34asdfsd.js.

  5. Kopiera inbäddningskoden som du fick via e-post och placera den i din HTML-fil <head> taggen

font awesome cdn embed code

font awesome cdn embed code

font awesome cdn register

font awesome cdn register

Här är en exempelwebbplats som använder 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>

Vi kan också registrera oss på font awesome CDN-webbplatsen för att hantera våra preferenser.

Fördelar med att använda font awesome CDN

  1. En snabbare server från vilken vi kan visa font awesome -ikoner.
  2. font awesome CDN-servrarna är alltid igång.
  3. Filerna kommer att serveras från närmaste CDN-server.
  4. Vi kan snabbt uppgradera till font awesome pro ikoner utan några kodändringar från vår sida.
  5. Vi kan skapa flera inbäddningskoder för olika webbplatser.
  6. Font Awesome CDN kan ladda dina ikoner asynkront och ytterligare öka webbplatsens prestanda.

Ytterligare en stor fördel med att använda font awesome CDN är att vi kan automatisera våra ikoners tillgänglighet.

Font Awesome CDN:s automatiska tillgänglighetsfunktion hjälper personer med syn- och hörselskador.

Tänk till exempel på nedanstående exempel

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

I exemplet ovan använder vi font awesome -ikonen på insändarknappen. Men för synskadade personer som använder skärmläsare för att få tillgång till webbplatsen är det inte nödvändigt att exponera dessa ikoner.

Så font awesome CDN lägger automatiskt till attributet aria-hidden=true till ikonen.

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

font awesome 5 CDN

Förutom ovanstående font awesome officiella CDN kan vi använda gratisversionen av font awesome ikoner genom att använda content delivery networks som cdnjs, maxcdn och jsdelivr.

Font awesome CDN av cdn js

För den senaste font awesome 5 versionen och högre använder du nedanstående font awesome CDN CSS-fillänkar från 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

Om du vill använda Javascript-versionen av font awesome ikoner använder du nedanstående CDN-länkar från 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

För de senaste CDN-versionerna av fontawesome hänvisas till nedanstående cdnjs-länk från cloudflare.

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

Font awesome CDN-länkar av jsdelivr

Servera font awesome ikoner CSS-filer med hjälp av nedanstående jsdelivr CDN-länkar.

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

För Font awesome CDN javascript-filer använder du länkarna nedan.

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

Här är länken till senaste jsdelivr fontawesome CDN.

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

Font awesome Bootstrap CDN-länk

För tidigare versioner som font awesome 4.7 kan vi använda bootstap cdn-länkar

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

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
Föregående:
Avatar

Arunkumar Gudelli

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