Начало работы. Начало работы Способы добавления своих иконок

Иногда элементы сайта динамически формируются, например, PHP функцией, и нет прямой возможности редактировать HTML, тогда применяют псевдоклассы в селекторах CSS.

Я покажу как это сделать на примере виджета категорий . Посмотрите на фрагмент исходного кода:

Свойство content генерирует иконку из hex-кода таблицы символов Unicode, который можно узнать на странице с иконкой:

Unicode \f07c как раз и соответствует hex-коду нужной иконки, который в дальнейшем применяем для стилизации собственных классов.

На этом завершаю краткий обзор, если появились вопросы — задавайте в комментариях. Используете ли Вы иконки Font Awesome на своем сайте, быть может другой шрифт?

В одной из предыдущих статей мы писали об использовании иконочных шрифтов как одном из способов достижения адаптивности картинок на сайте. Здесь на эту статью. И сегодня мы поговорим об одном из самых популярных иконочных шрифтов – Font Awesome. Сегодня мы на практике посмотрим, как подключить Font Awesome на сайте на движке WordPress без использования плагина и как использовать этот шрифт.

Что такое Font Awesome и в чем его преимущество?

Иконочный шрифт Font Awesome – это шрифт, созданный с помощью значков (иконок), но это ни в коем случае не набор картинок. Почему это различие так важно? Поскольку шрифт Font Awesome:

• Векторный – это означает, что он отлично смотрится независимо от того, в каком размере он отображается.
• Настраиваемый – вы можете манипулировать им, как и любым другим шрифтом. Изменяйте цвет, добавляйте анимацию и многое другое!
• Кросс-браузерная совместимость – иконочный шрифт должен работать практически в любом браузере.

В настоящее время Font Awesome предлагает набор из 1264 различных и бесплатных иконок, которые вы можете добавить практически в любом месте на своем WordPress сайте. Если вам мало такого количества иконок, тогда переходите на платное Pro.

Как добавить Font Awesome в WordPress вручную (без плагина)

Добавить шрифт Font Awesome на сайт WordPress вручную довольно легко. Этот процесс состоит из 2-х частей: во-первых, нужно подключить файл стилей этого шрифта в секции , во-вторых, в исходном коде (в шаблоне, или в режиме Текст редактора в Консоли) использовать определенный класс для нужной иконки.

1-й этап: подключение файла стилей шрифта Font Awesome

Первым шагом является добавление CSS-стилей Font Awesome в шаблон header.php активной темы. Добавьте код подключения файла CSS-стилей в секцию :

Этот код подключит файл с таблицей стилей Font Awesome из репозитория Bootstrap по CDN. Вы также можете непосредственно скачать файл стилей с официального сайта Font Awesome (https://fontawesome.com/) и подключить его со своей темы.

Более предпочтительный вариант подключения не только стилей, но и скриптов, заключается в использовании специальной функции подключения в файле functions.php активной темы. Вместо того, чтобы редактировать файл header.php , добавьте следующий код в файл functions.php активной темы:

Function load_font_awesome() { wp_enqueue_style("font-awesome-style", "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); } add_action("wp_enqueue_scripts", "load_font_awesome");

Использование иконок Font Awesome

После того, как вы подключили нужные стили в свою тему, вы уже можете начать использовать значки шрифта Font Awesome практически в любом месте сайта.

Чтобы найти полный список иконок, перейдите на официальный сайт Font Awesome в раздел меню Icons и выберите нужный значок. Например, если вы хотите добавить иконку с «пальцем вверх», найдите иконку «thumbs-up» (https://fontawesome.com/icons/thumbs-up?style=regular).

У каждой иконки есть своя страничка, на которой вы можете увидеть приблизительный вид иконки при разных размерах, узнать код Unicode, а также можете скачать иконку в формате SVG. Наибольший интерес в данный момент для нас представляет пример кода для вставки иконки. Например, для иконки с «пальцем вверх», пример кода будет следующим:

ВАЖНО! Учтите, что в нашем примере мы используем версию шрифта 4.7.0. На данный момент самой последней версией является версия 5.1.0, и в ней используется другой формат классов. Например, выше указанная иконка подключается в формате .

После того как вы выбрали иконку, скопируйте код для ее подключения и вставьте в нужном месте. Это может быть любой файл шаблон в активной теме. Либо вы можете вставлять иконки через Консоль. При редактировании поста/страницы в режиме Текст добавьте нужный класс для тега i (или, например, тега span).

При использовании файла стилей Font Awesome разных версий синтаксис формата класса будет разным:

Краткий итог

В сегодняшней статье мы рассмотрели практические моменты добавления иконочного шрифта Font Awesome на свой сайт WordPress. Если у вас есть вопросы по данной теме, озвучьте их в форме комментирования ниже.

Напишите в комментариях свое отношение к использованию Font Awesome, а также поделитесь своими впечатлениями, если вы используете версии 5.x.x этого шрифта.

Здесь вы можете скачать уникальные шаблоны для Blogger . Темы данной подборки отличаются более продвинутой SEO оптимизацией .

Языки : Английский, Русский.

Типы : Новостные, Журнальные, Блог, Минимализм, Портфолио, Одностраничные, Галерея, Grid "сетка", Интернет магазин, Визитки, Корпоративные сайты.

Тематики : Спорт, Фотографии, Игры, Кулинария, Стиль и мода, Женские, Детские, Автомобили, Здоровье, Путешествия, Туризм, Дизайн, Ремонт домов, Интерьер, Природа, Животные, Танцы, Видео, Музыка, Политика, Экономика, Бизнес, Форекс, Искусство, Картинки, Обои, Заработок, Недвижимость, Рыбалка, Охота, Софт, Программное обеспечение, Игровые приложения Android.

Технологии : Jquery, AMP, Bootstrap, Ajax, Javascript, Адаптивный дизайн.

Лучшие шаблоны blogger, выбор пользователей

UberSpot отличное решение для тех, кому важен красивый дизайн, SEO оптимизация и эффективный функционал. В этой теме вы найдете ряд крутых и продуктивных новинок, например новый виджет Инстаграма, Карты сайта, Публикаций, Комментариев и др.. Так же вы сможете воспользоваться двумя разными типами макетов.

Unstoppable "Покоритель ниш". Это идеальное решение для однотематических сайтов и блогов. Задумка при создании темы была в том, чтобы реализовать бесконечную навигацию, передвижение по которой смогут отслеживать поисковые системы. Таким образом новая система навигации в отличии от предыдущих не просто увеличит поведенческий фактор, но и в полной мере отобразит его, что повлечет за собой рост позиций сайта в поиске.

Сконструирован на базе новых Тем Блоггер из серии (СNES). Способен решать много поставленных задач. Можете использовать его со всеми виджетами, или частично, как персональный информационный блог. Скорость загрузки страниц приятно удивит.

BlogBoard один из лучших гридеров в 2018 году. Совмещает сразу несколько стилей. Можно использовать под блог-интернет магазин. Он отлично справится с презентацией ваших навыков и услуг так что подойдет и для портфолио.

Dionis обладает упрощенным типом подачи сообщений. Подойдет для любых ниш и историй. Из фишек можно выделить красивый preloader (анимационная картинка перед загрузкой главной страницы), рекомендуемые сообщения всплывают с правой стороны при скроллинге страницы.

Это быстрая и гибкая модель, которая впитала в себя несколько дополнений из социальных сетей. Отличный вариант для тех кто ценит свое время. Переведен на русский язык.

Mistik обладает четырьмя разными стилями. Вы можете выбрать себе тот, который вам больше всего приглянется. Легкая настройка меню, цветовых гамм и остальных элементов, позволяют создать свой уникальный дизайн.

NewsB - это легкая, новостная тема, с комбинированной цветовой гаммой, простыми и в тот же момент стильными виджетами, созданными для различных тематик и категорий контента. NewsB полностью адаптивный и без проблем поддерживается всеми современными браузерами. Полная версия включает новейшие на сегодняшний день блогеровские SEO настройки, что позволит вашему сайту поднять свой рейтинг в поисковых системах еще выше.

Minima Mag - это современный новостной шаблон, с адаптивным дизайном, быстрой загрузкой сообщений, стильными гаджетами и конечно же с чистым дизайном в котором плавно сочетаются три цвета, что в итоге делает Minima Mag опрятным и элегантным.

Потрясающая тема с классическим стилем, предназначенная для женских сайтов и блогов. Avicia это профессиональная тема с элегантным и современным дизайном, которая способна вдохновлять и передавать читателям только положительными эмоциями.

Dream Press, входит в число лучших тем blogger. В нем вы увидите современный, элегантный, стильный и простой дизайн. В целом, все эти качества помогут удержать читателя на сайте.

Единственное, что вам нужно знать об ExGPress это то, что он обладает самым удобным функционалом, под стать социальной сети, что обеспечит вашему сайту большой процент возвращений. Ко всему можно добавить SEO оптимизацию, высокую скорость загрузки и большой запас места для гаджетов и рекламы. ExGPress прорабатывался специально для комфортного просмотра контента и наилучшего взаимодействия с поисковыми системами, именно это делает его одним из лучших шаблонов для blogger на сегодняшний день. На днях добавили ему новую функцию, плавающие сайдбары, при прокрутке страницы вниз или вверх сайдбары с виджетами перемещаются вслед за скроллингом.

Grid Line это современный и стильный шаблон для blogspot. Все его элементы тщательно отобраны, оптимизированы и выстроены таким способом, чтобы максимально сконцентрировать внимание читателя на контенте. Grid Line был создан не только для успешного продвижения вашего веб-ресурса в поисковых системах, но и для того, чтобы поднимать настроение его пользователям и читателям.

Чтобы подключить шрифт Font Awesome на свой веб-сайт вы можете воспользоваться двумя способами:

Использование иконок шрифта Awesome

Вы можете поместить иконки Awesome практически в любом месте, используя CSS префикс fa и имя иконки, которые расположены на сайте . Шрифт Awesome предназначен для использования со строчными элементами HTML (можно использовать тег для краткости, но использование тега семантически более правильно).

fa-camera-retro

Выше приведенный код будет выглядеть примерно так: