Украшаем дизайн сайта с помощью иконок Font Awesome

Здравствуйте, друзья.

Сегодня новая статья из рубрики «Дизайн».

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

Тоже самое касается и маленьких иконок возле количества комментариев, даты, количества просмотров.

иконки font awesome

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

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

Как подключить иконки Font Awesome к сайту

Существует 2 способа подключения:

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

Рассмотрим оба варианта более подробно.

Вариант 1

Заходим на [urlspan]официальный сайт Font Awesome[/urlspan] и берем строку кода подключения загрузки файла с облачного хранилища. Строка будет в первом пункте страницы, также ее я продублировал ниже.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

Вставляем ее на свой сайт между областямитут вставляем. Если у вас сайт на WordPress, то данная область находится в файле Header.php.

На этом подключение закончено. Остается только [urlspan]зайти на эту страницу[/urlspan] и выбрать подходящую иконку. Жмем на понравившуюся иконку и попадаем на страницу с вариантами различных размеров иконок, чтобы вы понимали, как она будет выглядеть при разных размерах шрифта. Также там будет и код, который будет выводить иконку.

код иконки font awesome

Этот код вставляем в любое место, где хотим отобразить иконку.

[box style=»1″]

Замечу, что такой метод вставки не работает в названии виджетов WordPress. Если просто вставить перед фразой код иконки, то он будет пропадать оттуда. Поэтому нужно использовать другой метод с помощью Jquery, о котором я сделаю следующую статью Там тоже все очень просто.

[/box]

Необходимо размещать код в файлах шаблона или в каких-то текстовых элементах. Например, в текстовом виджете в самом поле ввода содержимого, иконки работают. Таким образом у меня работает виджет популярных и обсуждаемых записей. Остальные же иконки прописаны в верстке, как самого шаблона, так и плагинов.

Вариант 2

Скачиваем папку с файлами [urlspan]отсюда[/urlspan].

скачиваем иконки font awesome

скачиваем только иконки font awesome

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

файлы библиотеки font awesome

Загружаем все файлы в корень темы ко всем папкам и файлам. Я не углублялся, нужно ли загружать только один конкретный файл или все папки, поэтому загрухил все, что было внутри архива.

Далее нужно подключить файл font-awesome.min.css, лежащий в папке CSS. Используем следующую строку, в ней только пропишите свой путь (домен и название темы). Размещаем ее по аналогии, как и с первым вариантом — в шапку сайта.

<link rel="stylesheet" href="http://ваш домен/wp-content/themes/название папки с темой/css/font-awesome.min.css">

Далее аналогичным образом ищем понравившуюся иконку и вставляем ее в нужные места шаблона.

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

Изменение цвета иконок

Если же вам необходимо изменить цвет иконок, то это также вполне реально и не составит труда. У каждой иконки имеет общий класс (.fa) и индивидуальный класс с названием иконки. На примере выше с иконкой карандаша индивидуальный класс следующий:

fa-pencil-square-o

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

.fa-pencil-square-o:before{
color: #111; /*черный цвет*/
font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/
}

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

.fa:before{
color: #111; /*черный цвет*/
font-size:12px /*размер иконки 12 пикселей в ширину и высоту*/
}

Иногда имеет смысл делать такое оформление, чтобы иконки выглядели как-то по своему и делали общий дизайн сайта более разнообразным и качественным. Сразу будет видно, что оформление сделано не на коленке.

На этом сей материал я заканчиваю. Надеюсь, что он вам будет полезен. Тема актуальная. Лично я теперь использую такие иконки на всех сайтах. Стараюсь избавляться от всех картинок, и делать все максимально чисто и просто.

А вы используете иконки и слышали ли о них? Если нужна будет помощь, то обязательно пишите свои вопросы в комментариях.

Пока.

С уважением, Константин Хмелев!

Оцените статью
Добавить комментарий

  1. Владимир

    Действительно полезная статья. Спасибо за наводку на такие прекрасные иконки. Оценил статью)

    Ответить
  2. Игорь

    Давно хотел реализовать подключение иконок для мелких элементов сайта на одном из проектов. Спасибо автору за материал.

    Ответить
  3. Юрий

    Классно, спасибо, применил на своём сайте, только вот у меня с хлебными крошками не получается, они от wp-kama, иконка получается выше, не в курсе как сделать нормально?

    Ответить
    1. Константин Хмелев автор

      Это уже дело стилей, как конкретно сделать не подскажу.

      Ответить
      1. Юрий

        А на этом блоге не от камы крошки. Если от камы, куда вставлялся код?

        Ответить
        1. Константин Хмелев автор

          Нет, не от камы, да и вставка ничем не отличается. Все делается по одному принципу.

          Ответить
    2. Zaine

      Вот ссылка с примером как выравнивать в CSS иконки в строке с хлебными крошками: https://codepen.io/anon/pen/qwPWXp?&editable=true
      В content: «…» добавляем ссылку на вашу иконку или можно вставить код для иконок Font-Awesome.

      Ответить
  4. Юрий

    Даже к титлу иконка подошла.

    Ответить
  5. Александр

    Спасибо за интересную статью.

    Ответить
  6. Аня

    Хороший специалист своего дела !

    Ответить
  7. Иван

    Почему то авесоме не хочет отображаться в гугл-хром… подключение по первому варианту. и заметил, что в вебвизоре яндекс авесоме не отображается — просто рамки

    Ответить
    1. Константин Хмелев автор

      Все везде отображаться должно. В вебвизоре не отображается, но посетители на сайте все видят.

      Ответить
  8. Алексей

    Недавно установил себе на сайт векторные шрифты (иконки). Встала задача поменять размер и цвет иконок. Наткнулся на вашу статью в поисках ответов как все это реализовывается. Все доступно и понятно. Автору статьи спасибо, а сайту побольше полезных уроков!

    Ответить
  9. Алексей

    Отличный сервис иконок для сайта! Закачал себе на хостинг, чтобы не было лишний раз обращений к сторонним ресурсам. Все работает как надо.

    Ответить
  10. Андрей

    Использую для своих некоторых проектов, работает на ура.

    Ответить
  11. Александр

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

    Ответить
  12. Михаил

    Всё здорово. Отличная подсказка. У себя реализовал (на WP) по инструкции с «сайта производителя»:
    https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
    1. Скачал последний free’шный архив «fontawesome-free-5.6.3-web.zip» (~13MB), закинул в корень темы, распаковал, каталог (для упрощения пути) переименовал из «fontawesome-free-5.6.3-web» в «fontawesome»
    2. В /wp-content/themes/***/header.php дописал:

    3. Пользуюсь :)
    4. Чтобы получить «название виджета + ИКОНКУ» — поле «Название» оставляю пустым, а в текстовом поле простой код — наподобие: Work hours
    Если бы не Ваша отличная статья — руки не дошли бы…

    Ответить
  13. Игорь

    Как по мне FontAwesome самый ходовой вариант в плане иконок

    Ответить
  14. Тим

    Может быть кто сталкивался с такой проблемой:

    Вставляем все класс, отображается лого телеграма в кружке

    Вставляем (лого телеграма без кружка, просто самолетик) — не отображается

    Та же ситуация с ютуб иконкой, (надпись) всё ок, (кнопкой плей) — нет.
    fa подключен через cdn

    Ответить
  15. Соня

    Здравствуйте, я не совсем понимаю строчку «Загружаем все файлы в корень темы ко всем папкам и файлам.» Я совсем новенькая в в html и хочу понять кто он и что он, если вам не сложно объясните.

    Ответить