Константин Хмелев

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

Опубликовано: 15.02.2020
Время на чтение: 6 мин
19
2427

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

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

Кто следит за моим блогом знают, что пару дней назад я обновил дизайн блога. Так вот, все иконки, которые вы видите напротив пунктов меню и рубрик, а также в некоторых заголовках, например, во вкладках между переключением популярных и обсуждаемых записей, возле заголовка похожих статей в конце текста и возле заголовка количества комментариев, это все не картинки, а специальный шрифт 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 пикселей в ширину и высоту*/
}

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

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

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

Пока.

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

Плохо
3
Интересно
1
Супер
1
Обсуждение
  • Владимир
    Опубликовано: 18.10.2016 Ответить на сообщение

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

  • Игорь
    Опубликовано: 26.10.2016 Ответить на сообщение

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

  • Юрий
    Опубликовано: 28.12.2016 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 28.12.2016 Ответить на сообщение

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

      • Юрий
        Опубликовано: 29.12.2016 Ответить на сообщение

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

        • Константин Хмелев
          Опубликовано: 29.12.2016 Ответить на сообщение

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

    • Zaine
      Опубликовано: 14.04.2019 Ответить на сообщение

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

  • Юрий
    Опубликовано: 28.12.2016 Ответить на сообщение

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

  • Александр
    Опубликовано: 12.02.2017 Ответить на сообщение

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

  • Аня
    Опубликовано: 26.02.2017 Ответить на сообщение

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

  • Иван
    Опубликовано: 04.07.2017 Ответить на сообщение

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

    • Константин Хмелев
      Опубликовано: 05.07.2017 Ответить на сообщение

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

  • Алексей
    Опубликовано: 27.11.2017 Ответить на сообщение

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

  • Алексей
    Опубликовано: 10.12.2017 Ответить на сообщение

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

  • Андрей
    Опубликовано: 19.04.2018 Ответить на сообщение

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

  • Александр
    Опубликовано: 10.11.2018 Ответить на сообщение

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

  • Михаил
    Опубликовано: 25.12.2018 Ответить на сообщение

    Всё здорово. Отличная подсказка. У себя реализовал (на 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
    Если бы не Ваша отличная статья - руки не дошли бы...

  • Игорь
    Опубликовано: 14.02.2020 Ответить на сообщение

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

  • Тим
    Опубликовано: 04.03.2020 Ответить на сообщение

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

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

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

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.