Главная » Файлы » Прочие скрипты » CSS

Иконки для вашего сайта на чистом CSS с использованием специального шрифта и SVG (249 иконок) для uCoz
24.06.14, 16:55:03

Скачать файл




На днях нашёл замечательное решение для всех веб-разработчиков, которое позволит максимально оптимизировать и рационализировать использование графики для вашего сайта. Решение просто замечательно тем, что оно использует всего то один шрифт и SVG элемент. В итоге у вас будет набор в 249 иконок, которые можно раскрашивать, масштабировать и стилизовать как угодно. Как по мне, так это просто здорово! Итоговый размер архива всего около 300 килобайт, что очень мизерно по сравнению с графической альтернативой. Пользуйтесь на здоровье

Для начала посетите сайт разработчика, чтобы оттуда брать названия классов для нужных картинок: КЛИК

Моё тестирование в фидле: КЛИК

Установка:

В самый верх между < head > и < /head > вставляйте:
Код
<link rel="stylesheet" href="/css/font-awesome.css">
  <!--[if IE 7]>
  <link rel="stylesheet" href="/css/font-awesome-ie7.min.css">
  <![endif]-->

Использовать иконки очень просто. Пример:
Код
<i class="icon-time"></i>
  <i class="icon-user"></i>
  <i class="icon-folder-close"></i>
  <i class="icon-comments"></i>

Опять же повторюсь, что названия классов иконок смотрите на указанном выше официальном сайте

Можете как угодно стилизовать иконки, меняя размер шрифта, его цвет и придавать CSS3 свойства. Например:
Код
<i class="icon-time" style="color:#ff0000;font-size:20px;text-shadow:1px 1px 3px #000"></i>

Всё содержимое архива, не меняя структуры, залейте в папку css

Материал подготовлен Apocalypse

Категория: CSS | Добавил: Apocalypse | Теги: CSS, шрифта, чистом, на, Вашего, использованием, специального, иконки, для, сайта
Просмотров: 720 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: