Хотите сделать ваш сайт ещё более привлекательным? Шрифтовые иконки помогут украсить ваши записи, страницы или меню. И когда речь идёт о шрифтовых иконках, то нельзя не вспомнить Font Awesome .
Если вы хотите добавить большую коллекцию иконок Font Awesome на ваш сайт WordPress, то читайте о двух быстрых и простых способах, как добавить их на WordPress.
Что такое Font Awesome Icons и чем они полезны?
add_action("wp_enqueue_scripts", "enqueue_load_fa"); function enqueue_load_fa() { wp_enqueue_style("load-fa", "https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"); }
Вставляем иконки Font Awesome
Когда вы добавите код в вашу тему, вы будете готовы начать использовать иконки Font Awesome везде.
Найти полный список иконок можно на веб-сайте Font Awesome .
К примеру, если вы ищите иконку «Download», то просто вводите в поиск «download» и выбираете из доступных вариантов:
После выбора понравившейся иконки вы можете увидеть экран с разными размерами этой иконки. В центре экрана вы должны заметить небольшой блок кода:
Вам нужно скопировать весь код выбранной иконки. Потом, вы можете вставить этот код куда угодно в WordPress, неважно, какой редактор вы для этого используете. Просто убедитесь, что вы вставляете его, когда редактор переключен в режим "Текст":
Вы можете вернуться к визуальной вкладке после окончания внедрения кода. После публикации записи вы увидите свою иконку во фронтенде:
Как увеличить размер иконки Font Awesome
Как вы видите в примере сверху, иконки довольно маленькие. Если вам нужно их увеличить, то нужно добавить несколько строк кода. К примеру, чтобы увеличить размер иконок в два раза, вам нужно добавит «fa-2x » в класс иконок.
Например, вот изначальный код иконки:
А вот код с увеличенной в 2 раза иконкой:
В реальной жизни иконка будет выглядеть теперь так:
Вот список кусочков кода, которые вам нужно добавить, чтобы изменить размер:
- fa-lg – увеличить на 33%
- fa-2x – увеличить в 2 раза
- fa-3x – увеличить в 3 раза
- fa-4x – …
- fa-5x – … ну вы поняли!
Вы можете также делать другие крутые штуки, например, использовать иконку Font Awesome как пункт в маркированном писке, добавлять анимацию и многое другое. На официальном сайте Font Awesome вы можете найти инструкцию , как можно менять шрифтовые иконки.
2. Как добавить Font Awesome на WordPress с помощью плагина
Если вам не нравится предыдущий способ, то вы можете установить плагин. Существует множество различных плагинов, где доступна эта функция, но одним из самых популярных является Better Font Awesome :
Вы можете попробовать использовать и другие плагины, но нам кажется, что этот наилучший по нескольким причинам:
- Он регулярно обновляется. Это важно, поскольку несколько популярных плагинов Font Awesome не обновлялись годами.
- Автоматически импортирует новый набор иконок Font Awesome.
- Позволяет вам добавлять иконки через шорткод или тот же код, что мы использовали.
Для начала установите и активируйте плагин.
Он добавит новый раздел меню Настройки → Better Font Awesome в вашей консоли. Вам не нужно настраивать ничего, просто следуйте инструкциям, которые предоставит плагин:
Добавление иконок
Чтобы добавить иконки к записям, вы можете использовать тот же метод, который мы показывали вам в ручной версии, или использовать шорткод. Преимущество использования шорткода состоит в том, что вам не нужно менять вкладку «Text» в вашем редакторе.
Формат шорткода, который вам нужен:
Где NAME – это название иконки на веб-сайте Font Awesome:
Вы можете добавить этот шорткод в модуль Divi или в обычный текстовый редактор WordPress. Вот пример, где мы добавили иконку через шорткод в текстовый модуль во время использования Divi Visual Builder:
Visual Builder отображает это так:
Вы можете использовать тот же шорткод в обычном редакторе WordPress.
Если вы хотите изменить размер вашей иконки с помощью шорткода, то просто добавьте тэг класса с размером иконки:
Итоги
Вот и всё! Два разных способа добавить векторные иконки Font Awesome на ваш сайт WordPress. Мы предпочитаем ручной метод, поскольку он отнимает меньше времени и потом не нужно волноваться о потенциальной поломке плагина.
Но если вы не хотите трогать код темы, то лучше используйте плагин Better Font Awesome .
Теперь ваша очередь! А вы используете Font Awesome?
На сегодняшний день в сети полно различных «иконочных» шрифтов, при помощи которых можно легко добавлять иконки на своих сайтах.
Навигация по статье:
Что такое Font Awesome
Font Awesome — шрифт и CSS-инструментарий, предназначенный для размещения множества векторных, легко настраиваемых иконок на своих сайтах.
Все, что можно настраивать при помощи CSS — можно применить к иконкам Font Awesome на Ваших проектах. Одним из важнейших преимуществ этих шрифтов — четкое и красивое отображение при различных размерах. Если обычная png-иконка с прозрачным фоном или еще хуже jpg-иконка при увеличении будет выглядеть не очень красиво (появятся эффекты размытия, нечеткость), то иконка в виде шрифта сохранит идеальное качество . Вместе с этим, как в любом шрифте заранее предопределен список символов, так и в Font Awesome заранее предопределен список готовых, отобранных из наиболее часто нужных иконок.
Способы добавления своих иконок
Каждый день сервис Font Awesome принимает десятки запросов от пользователей и компаний на добавление своих иконок в библиотеку сервиса. Существует несколько факторов, которые влияют на положительное решение сервиса о добавлении новых иконок. Одним из основных является частота запросов, проще говоря — популярность. Но если даже ваша предложенная иконка идеально подходит по всем факторам и нужна всем, увидеть ее в общей библиотеке не удастся. Как минимум нужно будет ждать выхода обновления Font Awesome. А иконка, как правило нужно уже сейчас, для этого есть несколько способов. Ниже представлены наиболее подходящие из них.
Сложный способ редактирования Font Awesome
- Форкните репозиторий Font Awesome. Вам понадобится правильно настроенная среда разработки .
- Хакните файл с шрифтом FontAwesome.otf. Вы можете использовать эту инструкцию: создание Octicons (на английском).
- Поделитесь своей веткой с сообществом Font Awesome. Проверьте наличие открытых проблем, связанных с вашей веткой, и поделитесь своим репозиторием.
Простой способ внесения изменений в Font Awesome
Существует несколько онлайн сервисов, позволяющих кастомизировать Font Awesome. Вот наиболее популярные:
- Fort Awesome : https://fortawesome.com/ (от @davegandy, создатель Font Awesome) — Платный сервис , от создателя Font Awesome, пробный период — 14 дней.
- Fontello : http://fontello.com/ — Бесплатный сервис, удобный если вам нужно один раз изменить набор своих иконок.
- IcoMoon : http://icomoon.io/app/#/select — Онлайн сервис, который представляет много различных возможностей с редактированием и добавлением иконок. Бесплатный.
- Fontastic : http://fontastic.me/ — Еще один сервис, есть возможность генерации svg спрайтов, есть регистрация и управление вашими шрифтами. Бесплатный.
Вы можете использовать любой из предложенных, это быстро и просто. Лично я рекомендую IcoMooon . Последнее время пользуюсь именно им и в этой статье я опишу как использовать IcoMoon детальнее.
Добавление иконок через Icomoon
IconMon — онлайн сервис для создания собственных шрифтов из иконок для использования на сайтах или в мобильных и дектопных приложениях. Допустим у вас подключен Font Awesome, а вам нужно добавить иконки из других шрифтов или вообще свою собственную иконку с вашим логотипом. Для этого вы создаете новый проект в IconMon, импортируете в него Font Awesome шрифт, если нужно то другие шрифты или свои иконки в виде шрифтов/svg картинок. Затем вы скачиваете получившийся шрифт и используете в своем приложении вместо Font Awesome. Ниже я покажу как это делать пошагово.
IconMon: начало работы
Публикация готового сета иконок Iconmoon на сайте
Скачав архив вы можете подключить его на своем сайте вместо Font Awesome и использовать иконки уже из этого набора, включая вашу собственную иконку. Для подключения на сайте нам понадобятся файлы из папки fonts и style.css — заливаем их к себе на сайт (при необходимости style.css можно переименовать или вообще добавить контент из него в свой css файл, который был использован на сайте ранее). Обратите внимание, что разместив font и css у себя на сайте относительный путь к шрифтам в css файле мог изменится. По этому откройте уже загруженный на ваш сайт css код и убедитесь, что к шрифтам прописаны верные пути. Вот тут я красным выделил место, где нужно проверить пути.
@font-face {
font-family: "icomoon";
src: url("fonts/icomoon.eot?29mi8v");
src: url("fonts/icomoon.eot?29mi8v#iefix") format("embedded-opentype"),
url("fonts/icomoon.ttf?29mi8v") format("truetype"),
url("fonts/icomoon.woff?29mi8v") format("woff"),
url("fonts/icomoon.svg?29mi8v#icomoon") format("svg");
font-weight: normal;
font-style: normal;
После успешного переноса файлов iconmon на сайты использовать иконки можно таким образом:
Домой
Как обновлять ваш сет с иконками в будущем
Итак, мы успешно создали, подключили и используем свой кастомизированый шрифт Iconmon, в которому у нас и свои иконки и Font Awesome и любые другие. Мы хорошо поработали при генерации этого шрифта, долго прописывали названия к иконкам, выставляли цвета, вертели их редактировали. А теперь у нас появилась еще одна новая иконка и мы хотим ее добавить в этот наш шрифт. Iconmon предлагает 3 варианта решения этой задачи:
- Хранение ваших проектов в облаке Iconmon — это платная услуга. При регистрации в Iconmon можно выбрать подписку, оплатить ее и ваши проекты шрифтов будут храниться в вашем аккаунте. Вы всегда сможете изменить их, поставить версию выше, скачать и использовать.
- Если вы не чистили кэш браузера , то ваши проекты также останутся при повторном заходе на IconMon и вы сможете легко добавить новую дополнительную иконку в ваш проект и сохранить себе обновленный шрифт. Главная проблема в том, что после того, как вы почистите кеш в браузере, все это будет удалено.
- Настройки проекта в файле selection.json
— наиболее подходящий вариант для нас. Во-первых — это бесплатно. Этот файл вы скачиваете в архиве со шрифтом каждый раз, когда генерируете его.
Просто храните этот файл и в будущем можно будет заходить на IconMo и импортировать ваши проекты через него.
Заключение
Возможно есть и более удобные способы добавления своих иконок в Font Awesome, но они или платные или требуют более глубоких технических знаний. Этот же способ с использованием IconMon — прост, бесплатен и достаточно удобен. Если у вас появились какие-нибудь сложности, то добро пожаловать в комментарии. С радостью помогу.
Дорогие читатели, приветствую Вас! Рассказать о шрифте я планировал достаточно давно, в своих проектах активно его применяю и сегодня приведу несколько аргументов в его пользу.
Если Вы до сих пор используете растровые изображения для небольших графических элементов на сайте, то вынужден огорчить — при загрузке они создают дополнительные http-запросы к серверу, а при масштабировании теряют четкость.
Раньше для снижения числа запросов я объединял графические элементы дизайна в , такое решение для оптимизации скорости загрузки сайта актуально по сей день. Однако проблема масштабирования таким образом не решается и при увеличении изображений они теряют привлекательный внешний вид.
Содержит огромный набор векторных иконок, которые отлично масштабируются и превосходно выглядят на экранах высокого разрешения! На сайт они используются повсеместно: в форме поиска, в списке рубрик, возле даты публикации статьи, а также в кнопках социальных сетей и других элементах оформления.
Преимущества и недостатки иконочных шрифтов
Традиционные изображения с давних пор хорошо себя зарекомендовали в качестве графических элементов оформления сайта, в современную эпоху их постепенно вытесняют новые возможности CSS3, SVG и шрифты с иконками.
С чем связана их популярность? Решающую роль сыграли гибкость настройки, простота установки и использования в проекте. Основные преимущества:
- В коллекции более 500 бесплатных векторных иконок для сайта.
- Иконки масштабируются до любого размера без потери качества.
- Стилизация с помощью CSS — размер шрифта, цвет и другие свойства.
- Не требуется включенная поддержка в браузере.
- Кроссбраузерность (IE7 и выше), поддержка мобильных браузеров.
Наряду с преимуществами стоит упомянуть о недостатках, они, к сожалению, тоже есть, но довольно незначительные:
- В отличие от картинок, которые одинаково отображаются в различных браузерах, шрифты могут выглядеть по разному в зависимости от браузера и операционной системы.
- Дизайнеры детально проработали значительное количество иконок, однако существует вероятность, что Вы не найдете нужную для своего проекта.
Как подключить шрифт Font Awesome
Первый и самый простой способ подключить шрифт — загрузить его с внешнего CDN, вставляя в секцию
следующую строку: <"https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" >Второй способ заключается в ручной установке шрифта Font Awesome на свой хостинг. Загрузите архив с официального сайта, распакуйте и сохраните папки css и fonts на сервере в каталог font-awesome . Подключается аналогично, меняя лишь путь к файлу:
<link rel ="stylesheet" href ="../font-awesome/css/font-awesome.min.css" >Как использовать иконки Font Awesome на сайте
Для того чтобы вставить иконку на страницу поступаем следующим образом: находим на сайте нужную иконку и копируем ее код, затем вставляем в HTML-режиме:
class ="fa fa-twitter" >i >
На официальном сайте проекта есть документация и дополнительные примеры использования.
Иногда элементы сайта динамически формируются, например, PHP функцией, и нет прямой возможности редактировать HTML, тогда применяют псевдоклассы в селекторах CSS.
Я покажу как это сделать на примере виджета категорий . Посмотрите на фрагмент исходного кода:
<div class ="widget_title" > Рубрики блогаdiv > <ul > <li class ="cat-item cat-item-5" > <a href ="/category/wordpress/" > WordPressa > li > ul > .cat-item :before { content : "\f07c" ; font-family : FontAwesome; color :#393 ; padding-right :10px }Свойство content генерирует иконку из hex-кода таблицы символов Unicode, который можно узнать на странице с иконкой:
Unicode \f07c как раз и соответствует hex-коду нужной иконки, который в дальнейшем применяем для стилизации собственных классов.
На этом завершаю краткий обзор, если появились вопросы — задавайте в комментариях. Используете ли Вы иконки Font Awesome на своем сайте, быть может другой шрифт?
Здесь вы можете скачать уникальные шаблоны для 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 был создан не только для успешного продвижения вашего веб-ресурса в поисковых системах, но и для того, чтобы поднимать настроение его пользователям и читателям.
Awesome — это набор векторных иконок. А точнее шрифт состоящий не из букв и цифр, а из картинок. И эти изображения, так как они по сути являются шрифтом, можно оформлять (модифицировать) с помощью CSS стилей, устанавливать для них цвет, размер, тень и многое другое. Что согласитесь очень удобно.
В настоящий момент шрифт Awesome содержит более 1500 бесплатных иконок!
Как установить шрифт Awesome на сайт
Для того чтобы воспользоваться иконками шрифта Awesome нужно скачать набор шрифтов и стилей себе на сайт. Для этого переходим на официальный сайт — https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself и скачиваем архив, нажав на кнопку .
Теперь подключите в секции вашего сайта стили Awesome:
Альтернативный способ подключения шрифтов Awesome
Можно ничего не копировать к себе на сайт, а загружать все данные из CDN сети. Для этого нужно добавить следующий код в раздел :
Плюсом такого решения будет более быстрая скорость работы сайта, так как данные будут параллельно грузиться с разных серверов (сайт — с вашего хостинга, а шрифты — из сети Awesome), кроме того шрифты уже могут быть закешированы браузером, если вы когда-то посещали сайты на которых они используются.
Минус — это невозможность использования на автономных сайтах (без доступа к интернету) и зависимость от CDN сети Awesome. Поэтому я, как правило, использую первый способ.
Как использовать шрифты awesome на сайте
После того как вы подключили шрифты у себя на сайте вы можете добавить иконки Awesome на веб-страницу двумя способами:
- задать соответствующие классы для элементов и ;
- добавить к нужному элементу с помощью псевдоэлементов :before , :after и соответствующего значения свойства content .
Пример использования шрифтов Awesome
Для одного из сайтов я использовал следующий код (для элемента использованы стили шрифта awesome версии 4.7.0):
Поставка вычислительной техники и ПО
Построение систем охранного телевидения и видеонаблюдения
Разработка систем контроля и управления доступом
Проектирование и монтаж ЛВС/СКС и телефонии
В браузере результат выглядит так:
Где посмотреть иконки Awesome для сайта
Если буквы и цифры у вас нанесены на клавиши клавиатуры и их использование не вызывает затруднений, то вот по шрифтам awesome есть вопрос: а как узнать соответствие кода иконки и его графического изображения. Например, какой использовать HTML код для отображения иконки Android ?
Чтобы выяснить это посетите официальный сайт — https://fontawesome.com/icons?d=gallery&m=free
Например, изображению Android соответствует следующий код:
На экране он выглядит так:
Какую версию шрифтов Awesome лучше использовать на сайте
Шрифт Awesome постоянно развивается, в него регулярно добавляются новые иконки и варианты их оформления. На момент написания статьи актуальна 5 версия шрифта. Но вы спокойно можете использовать у себя на сайте предыдущие редакции 4.7.0 или даже 3.2.1. Для этого посетите страницы
Загрузка...
