как подключить и использовать в BLOGGER шрифт Font Awesome

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

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

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

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

Перед началом работы мы должны установить в блоге код библиотеки. Зайти во вкладку тема, изменить HTML и найти закрывающийся тег </head>. Сразу над ним вставить вот такую строчку -

<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Теперь сразу перейдём ко всему списку иконок на эту страницу. Если нажать на выбранную вами, то нас перебросит на другую вкладку где предложен код этой иконки. Обратите внимание на то, что иконки представлены разных размеров. Об этом будет ниже. Вот примерно такого вида (я выбрала символ youtube).

<i class="fa fa-youtube" aria-hidden="true"></i>

Устанавливаем в то место, где она будет отображаться.

Если честно, не совсем мне понятен здесь тег  aria-hidden="true", думаю можно обойтись и без него, просто удалить из кода.

Обратите внимание, что все иконки имеют общий класс fa, а каждая из них индивидуальный класс fa-youtube. Это к сведению. Чтобы увеличить размер иконок до нужного размера необходимо к полученном коду добавить соответствующие значения

<i class="fa fa-camera-retro fa-lg"></i>
<i class="fa fa-camera-retro fa-2x"></i>
<i class="fa fa-camera-retro fa-3x"></i>
<i class="fa fa-camera-retro fa-4x"></i>
<i class="fa fa-camera-retro fa-5x"></i>

Результат.

С помощью класса fa-fw легко создать своё уникальное вертикальное меню.

<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw fa-3x" aria-hidden="true"></i>&nbsp; Главная</a><br />
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw fa-3x" aria-hidden="true"></i>&nbsp; Карта блога</a><br />
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw fa-3x" aria-hidden="true"></i>&nbsp; Написать автору</a><br />
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw fa-3x" aria-hidden="true"></i>&nbsp; Инструменты</a><br />
<a class="list-group-item" href="#"><i class="fa fa-google-plus fa-fw fa-3x" aria-hidden="true"></i>&nbsp; Я в Гугл +</a><br />
<a class="list-group-item" href="#"><i class="fa fa-vk fa-fw fa-3x" aria-hidden="true"></i>&nbsp; Я в ВК +</a>

</div>

Устанавливайте ваши адреса и названия страниц. И выбранные вами иконки. Такое меню прекрасно разместится в сайдбаре блога. Уберите теги <br /> и получите горизонтальное меню под названием блога.

Результат.

Добавить класс fa-ul и fa-li можно получить красивый маркированный список или что -то такое.

<ul class="fa-ul">
  <li><i class="fa fa-bicycle fa-2x" aria-hidden="true"></i> велосипеды</li>
  <li><i class="fa fa-motorcycle fa-2x" aria-hidden="true"></i> мотоциклы</li>
  <li><i class="fa fa-car fa-2x" aria-hidden="true"></i>автомобили</li>
  <li><i class="fa fa-train fa-2x" aria-hidden="true"></i>поезда</li>
</ul>

Результат

Используйте fa-border (рамка) и fa-pull-right или fa-pull-left получите красиво оформленную цитату, выбрав соответствующую иконку.

<i class="fa fa-quote-left fa-3x fa-pull-left fa-border" aria-hidden="true"></i>

...шла собака по роялю, туда и обратно -

Результат.

Посмотрите ещё некоторые варианты использования иконочного шрифта на этой странице официального сайта Font Awesome и ещё дополнительная информация здесь.

Я хочу ещё показать вам, как в блоггере легко поменять цвет любой иконки.

Для этого пишем такой код-

<span style="color: blue;"><i class="fa fa-youtube fa-4x"></i></span>

color: blue; цвет синий
fa-youtube название иконки
fa-4x размер иконки

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

Всем удачи, спасибо за ваше внимание и до встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email