Долой картинки, тормозящие загрузку веб-страниц! С помощью великолепного шрифта мы сможем вставлять в свои тексты красивые, стильные иконки. Всё что для этого нужно — добавить в код шаблона сайта всего одну строчку.
При этом, увеличивая размер иконки, или меняя её цвет, мы получим такое же чёткое, контрастное изображение, как и на исходной картинке. А шрифт, расположенный в системе CDN (от английского Content Delivery Network или Content Distribution Network — Сеть доставки (и дистрибуции) контента) будет практически мгновенно доставлен в любую точку мира, не влияя на скорость загрузки страницы.
На сегодняшний день версия бесплатного шрифта «Font Avesome» 3.2.1 предлагает 361 символ-иконку, объединённые в тематические группы. И эта коллекция постоянно пополняется.
Как вставить шрифт «Font Avesome» на свой сайт или блог
Для этого достаточно добавить всего одну строчку в HTML-код шаблона своего сайта между тегами <head> и </head>. Вот эта строчка:
Этот код свяжет ваш сайт с серверами BootstrapCDN.
Теперь попробуем добавить нужную иконку к тексту статьи. В блогах Blogger (blogspot) это происходит так:
1. Переходим на вкладку HTML встроенного редактора
2. В нужном месте вставляем такой код:
А вместо ИМЯ-ИКОНКИ вписываем название выбранной иконки из каталога по этой ссылке.
Пример:
Допустим нам по тексту нужна иконка Twitter. Мы находим эту иконку в каталоге, копируем её имя и вставляем в наш код. Получается вот так:
Если этот код поместить на HTML-вкладку редактора, то получим в тексте вот такую иконку:
Если нам необходима иконка большего размера, то к коду добавляем трёхкратное увеличение:
Получаем такой результат:
Если мы хотим выделить иконку рамкой, то прописываем в коде границы:
И получаем иконку в рамке:
Как видите — всё достаточно просто. Используя многообразие предложенных в шрифте символов и добавляя к ним различные стили CSS, комбинируя иконки между собой, мы можем бесплатно получить бесконечное множество красивых и качественных иконок, которые будут вносить разнообразие в наши тексты и добавлять оригинальные детали в дизайн наших блогов.
Кроме того, применение этого шрифта позволяет создавать стильные кнопки и элементы навигации. Подробнее — на этой странице.
Доброй охоты всем нам!
Ваш Retliff
Спасибо ! Для меня очень полезно )
Всегда к твоим услугам!
2 дня пытался настроить, все нервы истрепал. А тут раз — и готово. класс! Спасибо!
Наверное будете смеяться. А я не могу ни как.
The article is great, there is a lot of useful information. Thank the author very much. entrahotmail.com
Благодарю, много интересного вас на сайте! С удовольствием захожу на новинки!