Hobo
Последнее обновлене - 30 июня 2023 в 17:59
Хотите украсить свой сайт красивыми иконками? Тогда вам нужно подключить шрифты font-awesome. Это одна из самых популярных библиотек иконок, которая используется на многих сайтах.
Раньше я пользовался иконочными шрифтами, но со временем перешел на спрайты. Существует несколько способов подключения шрифтов font-awesome. Рассмотрим их подробнее.
Содержание:
Где можно скачать файлы шрифтов font-awesome? Шрифты Font Awesome можно скачать с официального сайта проекта по ссылке https://fontawesome.com/. Для подключения шрифтов на свой сайт можно воспользоваться инструкцией на странице https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself. Там же вы найдете информацию о том, как подключить Font Awesome к своему проекту и использовать иконки.
Подключение через CDN
Самый простой и быстрый способ подключения шрифтов font-awesome – это использование CDN. Для этого нужно вставить в код страницы ссылку на файл со шрифтами, который находится на сервере CDN. Например:
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" crossorigin="anonymous" /> |
Важно: замените xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx на актуальный хеш-код.
Подключение через локальный файл
Если вы хотите загрузить шрифты font-awesome с локального сервера, то нужно скачать архив с библиотекой и распаковать его на вашем сервере. Затем вставьте ссылку на файл со шрифтами в код страницы:
|
1 |
<link rel="stylesheet" href="/path/to/font-awesome/css/all.min.css" /> |
Важно: замените /path/to/ на путь к файлу на вашем сервере.
Подключение через NPM
Если вы используете пакетный менеджер NPM, то можно установить библиотеку font-awesome командой:
npm install @fortawesome/fontawesome-free
Затем нужно подключить файл со шрифтами в коде страницы:
|
1 |
<link rel="stylesheet" href="/node_modules/@fortawesome/fontawesome-free/css/all.min.css" /> |
Важно: замените /node_modules/ на путь к файлу на вашем сервере.
Подключение к сайту на WordPress
Для подключения шрифтов Font Awesome к вашему сайту на WordPress при помощи плагина, вам нужно выполнить следующие шаги:
- Загрузите бесплатный плагин Font Awesome на странице https://wordpress.org/plugins/font-awesome/ или из админки сайта.
- Установите и активируйте плагин на вашем сайте.
- Используйте код Font Awesome для добавления значков на ваш сайт.
Вы можете использовать код Font Awesome, добавляя его в HTML-код страницы или записи. Например, чтобы добавить значок телефона, вы можете использовать следующий код:
|
1 |
<i class="fa fa-phone"></i> |
Если вы хотите использовать Font Awesome в своих собственных стилях, вы можете подключить файлы CSS и шрифты Font Awesome в свой файл стилей. Например:
|
1 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
Замените XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX на код целостности, который можно найти на странице загрузки Font Awesome.
Чтобы подключить Font Awesome без плагина, вставьте в файл function.php вставить код:
|
1 2 3 4 5 |
// Подключаю шрифты фонт-авесоме add_action( 'wp_enqueue_scripts', 'enqueue_load_fa' ); function enqueue_load_fa() { wp_enqueue_style( 'load-fa', 'https://maxcdn.bootstrapcdn.com/font-awesome/5.15.3/css/font-awesome.min.css' ); } |
Подключение шрифтов font-awesome не представляет особой сложности. Осталось подобрать подходящий способ и добавить красивые иконки на свой сайт!
Всем WEB!
