Как использовать Font Awesome CDN

Список CDN иконок Font Awesome Icons

В этом уроке мы узнаем, как использовать иконки font awesome, обслуживая их с font awesome cdn.

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

Шаги по использованию font awesome CDN

  1. Откройте официальный сайт font awesome icon.

  2. Получите уникальный код для встраивания, введя свой email по этой ссылке.

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

Передавайте CSS-файлы иконок font awesome, используя приведенные ниже CDN-ссылки jsdelivr.

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

Для получения ссылок на файлы javascript из CDN Font awesome используйте ссылки ниже.

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