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

Шрифт бесплатно
Долой картинки, тормозящие загрузку веб-страниц! С помощью великолепного шрифта мы сможем вставлять в свои тексты красивые, стильные иконки. Всё что для этого нужно — добавить в код шаблона сайта всего одну строчку.
При этом, увеличивая размер иконки, или меняя её цвет, мы получим такое же чёткое, контрастное изображение, как и на исходной картинке. А шрифт, расположенный в системе 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


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

Оставьте комментарий