Подключение Font Awesome 4.7.0 на сайте uCoz: полная инструкция
Введение
Иконки делают интерфейс сайта понятнее, современнее и удобнее. В uCoz часто требуется визуально выделять меню, кнопки, социальные сети, элементы магазина, предупреждения и любые интерактивные блоки.
Самый простой и правильный способ добавить иконки — подключить библиотеку Font Awesome 4.7.0.
Это проверенная временем версия, которая идеально подходит под uCoz, лёгкая, стабильная и совместима со всеми шаблонами.
Font Awesome работает как шрифт: вы подключаете один CSS файл и можете использовать сотни иконок прямо в HTML коде через короткий тег.
Что такое Font Awesome 4.7.0
Font Awesome 4.7.0 — библиотека векторных иконок.
Иконка выводится так:
<i class="fa fa-home"></i>
Каждая иконка — это символ шрифта, поэтому она:
• не теряет качество при увеличении
• поддерживает любые CSS свойства
• легко вставляется в любой модуль uCoz
• почти не влияет на скорость загрузки сайта
В каком месте uCoz подключать библиотеку
Подключение CSS-файлов происходит внутри тега <head>.
В uCoz он расположен в одном из шаблонов:
• Верх сайта
• Общий вид страниц
• Главная страница сайта
Важно: подключение должно находиться в шаблоне, который используется всеми страницами, иначе иконки будут работать только в части сайта.
Подключение Font Awesome 4.7.0
Используем официальный CDN от Cloudflare.
Код подключения:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Теперь вставляем его внутрь <head>.
Пример:
<head> <meta charset="utf-8"> <title>$SITE_NAME$</title> <link rel="stylesheet" href="/style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head>
После сохранения библиотека работает на всём сайте.
Проверка подключения
Откройте любой шаблон, где выводится текст, например:
• Материал полного вида
• Блог
• Новости
• Главная страница
Добавьте тестовую иконку:
<i class="fa fa-check"></i>
Если появилась галочка — подключение успешно.
Практическое использование Font Awesome 4.7.0
Иконки в меню
До:
<ul> <li><a href="/">Главная</a></li> <li><a href="/news">Новости</a></li> </ul>
После:
<ul> <li><a href="/"><i class="fa fa-home"></i> Главная</a></li> <li><a href="/news"><i class="fa fa-newspaper-o"></i> Новости</a></li> </ul>
Увеличение размера:
<i class="fa fa-home" style="font-size:18px;"></i>
Иконки в магазине (Shop)
Цена:
<div class="price"> <i class="fa fa-rub"></i> $PRICE$ </div>
Кнопка:
<button class="buy-btn"> <i class="fa fa-shopping-cart"></i> В корзину </button>
Социальные сети
<div class="social"> <a href="https://vk.com/"><i class="fa fa-vk"></i></a> <a href="https://t.me/"><i class="fa fa-telegram"></i></a> <a href="https://youtube.com/"><i class="fa fa-youtube-play"></i></a> </div>
CSS для красивого эффекта:
.social a {
margin: 0 5px;
font-size: 22px;
}
.social a i {
transition: 0.2s;
}
.social a:hover i {
opacity: 0.6;
}
Иконки в профиле пользователям
<i class="fa fa-user"></i> $USERNAME$
Иконки в уведомлениях и подсказках
<div class="alert"> <i class="fa fa-info-circle"></i> Пожалуйста, заполните все поля. </div>
Кнопки действий
<a href="$ADD_ENTRY_LINK$" class="btn"> <i class="fa fa-plus"></i> Добавить запись </a>
Размер, цвет и стилизация
Размер:
<i class="fa fa-phone" style="font-size:28px;"></i>
Цвет:
<i class="fa fa-warning" style="color:#e74c3c;"></i>
Стиль через класс:
.big-red {
font-size: 30px;
color: #e74c3c;
}
Использование:
<i class="fa fa-heart big-red"></i>
Простая анимация
CSS:
.icon-pulse {
animation: pulse 0.8s infinite alternate;
}
@keyframes pulse {
from { transform: scale(1); }
to { transform: scale(1.1); }
}
HTML:
<i class="fa fa-heart icon-pulse"></i>
Частые ошибки
- Подключение вставлено не в тот шаблон — иконки работают только в одном модуле.
- Подключено сразу несколько версий Font Awesome — классы конфликтуют.
- Ошибка в ссылке на CDN — библиотека не загружается.
- Код вставлен внутрь <body> — неправильная загрузка.
- Используются иконки от версии 5+, хотя подключена 4.7.0.
Выводы
Font Awesome 4.7.0 — идеальный способ добавить иконки в uCoz.
После подключения одной строки вы получаете:
• сотни готовых иконок
• простое управление цветом и размером
• возможность использования везде — в меню, товарах, кнопках и профилях
• улучшение визуального стиля без графических файлов
Это один из лучших инструментов, который можно добавить в шаблоны uCoz для быстрого улучшения дизайна.
Оцените полезность материала!
Лицензия: CC BY-SA 4.0
Автор: Юрий Герук
Комментарии