Любые иконки на сайт font-awesome 4.2

Любые иконки на сайт font-awesome 4.2

FireShot Capture - 0000041.jpg (1280×960)_ - http___kotod.ru_sites_default_files_

В данном материале вы найдете файл, который поддерживает 400! иконок для сайта. В нем вы найдете стрелки, домики, трубки, звездочки, кружки и множество других элементов, которые необходимо использовать на сайте.

Особенность таких иконок в том, что они:

  1. Легко перекрашиваются - фотошоп не нужен, так как иконки в виде шрифтов, то можно менять не только цвет, но и размер иконки без ухудшения качества!
  2. Иконки поддерживаются IE 8 и выше
  3. Иконки можно поворачивать и крутить за счет анимации.

Подключение и использование иконок 

Подключить иконки можно так: 

1) Поставьте тег <!DOCTYPE html> в начале страницы (если его у вас нет)

2) Пропишите в <head></head> ссылку на подключение css файла <link href="font-awesome.css" rel="stylesheet" type="text/css"/> и загрузите шрифты к нему (папка fonts)

Вставить иконку куда-угодно: <i class="fa fa-github-alt"></i> - где fa-github-alt - класс картинки иконки

Вставить иконку в input, submit, textarea и т.п.: 

Используется label с CSS. Пример: 

<label class="success1"></label>

<input type="text" style="padding-left: 23px"/>

CSS,который применяется к label - таким образом, label становится поверх input

label.success1{color:#339900;} 

label.success1:after { 

color: #339900; 

content: "\f00c"; /* код картинки */ 

font-family: FontAwesome; 

position: absolute; 

padding: 1px 0px 0px 5px; 

Все иконки fontawesome
Скачать исходник fontawesome

------------------------------------------------------------------------------

Все иконки icomoon
Скачать исходник icomoon

| | Любые иконки на сайт font-awesome 4.2 | В данном материале вы найдете файл, который поддерживает 400! иконок для сайта. В нем вы найдете стрелки, домики, трубки, звездочки, кружки и множеств | http://blogprogram.ru/wp-content/uploads/2014/12/FireShot-Capture-0000041.jpg-1280×960_-http___kotod.ru_sites_default_files_-131x131.png

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>