Потрясающий шрифт бесплатно украсит иконками и кнопками тексты и дизайн любого сайта


Шрифт бесплатно

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

При этом, увеличивая размер иконки, или меняя её цвет, мы получим такое же чёткое, контрастное изображение, как и на исходной картинке. А шрифт, расположенный в системе CDN (от английского Content Delivery Network или Content Distribution Network - Сеть доставки (и дистрибуции) контента) будет практически мгновенно доставлен в любую точку мира, не влияя на скорость загрузки страницы.

                    


На сегодняшний день версия бесплатного шрифта "Font Avesome" 3.2.1 предлагает  361 символ-иконку, объединённые в тематические группы. И эта коллекция постоянно пополняется.

Как вставить шрифт "Font Avesome" на свой сайт или блог

Для этого достаточно добавить всего одну строчку в HTML-код шаблона своего сайта между тегами <head> и </head>. Вот эта строчка:

<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"></link>

Этот код свяжет ваш сайт с серверами BootstrapCDN.

Теперь попробуем добавить нужную иконку к тексту статьи. В блогах Blogger (blogspot) это происходит так:

1. Переходим на вкладку HTML встроенного редактора

2. В нужном месте вставляем такой код:

<i class="ИМЯ-ИКОНКИ"></i>


А вместо ИМЯ-ИКОНКИ вписываем название выбранной иконки из каталога по этой ссылке.

Пример:
Допустим нам по тексту нужна иконка Twitter. Мы находим эту иконку в каталоге, копируем её имя и вставляем в наш код. Получается вот так:

<i class="icon-twitter"></i>

Если этот код поместить на HTML-вкладку редактора, то получим в тексте вот такую иконку: 

Если нам необходима иконка большего размера, то к коду добавляем трёхкратное увеличение:

<i class="icon-twitter icon-3x"></i>


Получаем такой результат:  

Если мы хотим выделить иконку рамкой, то прописываем в коде границы:

<i class="icon-twitter icon-4x icon-border"></i>



И получаем иконку в рамке:  

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

Кроме того, применение этого шрифта позволяет создавать стильные кнопки и элементы навигации. Подробнее - на этой странице.

Доброй охоты всем нам!  

Ваш Retliff

Сергей Мазураш aka Retliff Блоггер со стажем. Стиль публикаций отличается простотой изложения и весёлым, ироничным подходом к самым серьёзным проблемам. Cпециализируется на создании и продвижении бесплатных блогов на платформе Blogger.



4 комментария:

  1. Спасибо ! Для меня очень полезно )

    ОтветитьУдалить
  2. 2 дня пытался настроить, все нервы истрепал. А тут раз - и готово. класс! Спасибо!

    ОтветитьУдалить
  3. Наверное будете смеяться. А я не могу ни как.

    ОтветитьУдалить

Буду очень признателен за Ваши доброжелательные комментарии!
Любые попытки втянуть автора и читателей в дискуссию, а так же ссылки на посторонние ресурсы - будут удалены.
Всем любителям "конструктивной критики" рекомендую прочитать статью http://maxpastukhov.com/critics