Как да използваме Font Awesome CDN

Списък с икони Font awesome CDN

В този урок ще научим как да използваме font awesome икони, като ги обслужваме от font awesome cdn.

Използването на CDN (Content delivery Network) е най-добрият начин да обслужваме font awesome икони с css или js файлове, вместо да ги хостваме от собствените си сървъри.

Стъпки за използване на font awesome CDN

  1. Отворете официалния уебсайт на иконата font awesome.

  2. Получете уникален код за вграждане, като въведете електронната си поща, следвайки тази връзка.

  3. След това font awesome ще изпрати имейл с кода за вграждане на Font Awesome CDN заедно с инструкции за добавяне на икони в нашия уебсайт.

  4. Примерният JavaScript font awesome CDN линк ще бъде в следния формат.https://use.fontawesome.com/a34asdfsd.js.

  5. Копирайте кода за вграждане, който сте получили по имейл, и го поставете във вашия HTML <head> таг

font awesome cdn embed code

font awesome cdn embed code

font awesome cdn register

font awesome cdn register

Ето примерната уебстраница, която използва 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>

Освен това можем да се регистрираме в уебсайта font awesome CDN, за да управляваме предпочитанията си.

Предимства на използването на font awesome CDN

  1. По-бърз сървър, от който можем да обслужваме font awesome икони.
  2. font awesome CDN сървъри, които винаги работят.
  3. Файловете ще бъдат обслужвани от най-близкия CDN сървър.
  4. Можем бързо да надградим до font awesome pro икони без никакви промени в кода от наша страна.
  5. Можем да създадем множество кодове за вграждане за различни уебсайтове.
  6. Font Awesome CDN може да зареди вашите икони асинхронно, което допълнително повишава производителността на сайта.

Още едно голямо предимство на използването на font awesome CDN е, че можем да автоматизираме достъпността на нашите икони.

Функцията за автоматична достъпност на Font Awesome CDN помага на хората със зрителни и слухови увреждания.

Например разгледайте примера по-долу

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

В горния пример в бутона за изпращане използваме икона font awesome. Но за хората с увредено зрение, които използват екранни четци за достъп до уебсайта, не е необходимо да излагат тази икона.

Така че font awesome CDN автоматично ще добави атрибута aria-hidden=true към иконата.

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

font awesome 5 CDN

Освен горепосочените font awesome официални CDN, можем да използваме безплатна версия на font awesome икони, като използваме мрежи за доставка на съдържание като cdnjs, maxcdn и jsdelivr.

Font awesome CDN от cdn js

За най-новата версия на font awesome 5 и нагоре използвайте посочените по-долу font awesome CDN връзки към CSS файлове от 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

Ако искате да използвате Javascript версия на font awesome икони, използвайте следните CDN връзки от 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

За най-новите версии на fontawesome CDN се обърнете към следните cdnjs връзки от cloudflare.

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

Font awesome CDN връзки от jsdelivr

Сервирайте font awesome икони CSS файлове, като използвате следните 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

За Font awesome CDN javascript файлове връзки използвайте по-долу.

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

Това е връзката към най-новия jsdelivr fontawesome CDN.

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

Връзка към CDN на Font awesome Bootstrap

За по-ранни версии като font awesome 4.7 можем да използваме 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! ↗