Заказать сайт

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

Категория: CSS • 25th Декабрь 2014 • Нет коммент.

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

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

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

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

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

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

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. Пример:

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;

}