PARTNER
MONEY
Понедельник, 20.11.2017, 22:22
Вы вошли как Гость | Группа "Гости"Приветствую Вас Гость | RSS
 
Главная БлогКарта сайтаРегистрацияВыходВход
Меню сайта
Разделы
Новости рунета
Наука и IT
Технологии
Аналитика
Операционная система
Слухи
Партнерские программы
Подработка
интересное
- строительство и ремонт
- недвижимость
- бытовая техника
- здоровье и медицина
- красота, косметика
- форекс, forex
- женские сайты
- для взрослых
- софт
- развлечения
- одежда и обувь
Последние записи
Известная цена беспроводной зарядки Apple AirPower
Смартфон BlackBerry Motion с защитой от воды
Новые детали о смартфоне Samsung со складным экраном
Как использовать Айфон в качестве модема
Секретные коды или что мы не знаем о наших телефонах
Translator
Главная » 2015 » Январь » 10 » Бесплатный шрифт, который украсит иконками и кнопками тексты и дизайн любого сайта
19:14
Бесплатный шрифт, который украсит иконками и кнопками тексты и дизайн любого сайта

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

 

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

источник

 
Категория: Технологии | Просмотров: 436 | Добавил: Admin | Теги: дизайн для сайта, шрифт, тексты, иконки, кнопки
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
поиск
            
обменник
changemoney.me
Реклама

...
Rambler's Top100    
Copyright MyCorp © 2017 Partner Money