Иконки
Иконки позволяют обогатить контент символами, которые сделают восприятие более легким и понятным. В SIMAI Framework используются иконки Font Awesome, у которых можно мгновенно настроить: размер, цвет, тень и все то, что можно сделать с помощью модификаторов.
Базовые иконки
Вы можете размещать иконки практически в любом месте, используя префикс CSS fa и имя значка. Шрифт Awesome предназначен для использования со встроенными элементами. Можно использовать тег <i> для краткости, но использование <span> семантически корректнее.
<i class="fa fa-heart" aria-hidden="true"></i> fa-heartИзменение размера
Чтобы увеличить размеры значков относительно их контейнера, используйте классы fa-lg (33%), fa-2x ... fa-10x.
<i class="fa fa-heart fa-lg" aria-hidden="true"></i> fa-lg
<i class="fa fa-heart fa-2x" aria-hidden="true"></i> fa-2x
<i class="fa fa-heart fa-3x" aria-hidden="true"></i> fa-3x
<i class="fa fa-heart fa-4x" aria-hidden="true"></i> fa-4x
<i class="fa fa-heart fa-5x" aria-hidden="true"></i> fa-5x
<i class="fa fa-heart fa-6x" aria-hidden="true"></i> fa-6x
<i class="fa fa-heart fa-7x" aria-hidden="true"></i> fa-7x
<i class="fa fa-heart fa-8x" aria-hidden="true"></i> fa-8x
<i class="fa fa-heart fa-9x" aria-hidden="true"></i> fa-9x
<i class="fa fa-heart fa-10x" aria-hidden="true"></i> fa-10xПри изменении размера иконок в рамках SIMAI Framework мы рекомендуем использовать модификаторы размера текста t--2 ... t-7. Это позволит правильно соотносить размер иконок с размером текста.
<i class="fa fa-heart t--2" aria-hidden="true"></i> t--2
<i class="fa fa-heart t--1" aria-hidden="true"></i> t--1
<i class="fa fa-heart t-0" aria-hidden="true"></i> t-0
<i class="fa fa-heart t-1" aria-hidden="true"></i> t-1
<i class="fa fa-heart t-2" aria-hidden="true"></i> t-2
<i class="fa fa-heart t-3" aria-hidden="true"></i> t-3
<i class="fa fa-heart t-4" aria-hidden="true"></i> t-4
<i class="fa fa-heart t-5" aria-hidden="true"></i> t-5
<i class="fa fa-heart t-6" aria-hidden="true"></i> t-6
<i class="fa fa-heart t-7" aria-hidden="true"></i> t-7Цвет иконок
Вы можете использовать цветовые модификаторы для указания цвета иконки.
c-red-900
c-red-a700
c-primary
<i class="fa fa-heart c-red" aria-hidden="true"></i> c-red
<i class="fa fa-heart c-red-900" aria-hidden="true"></i> c-red-900
<i class="fa fa-heart c-red-a700" aria-hidden="true"></i> c-red-a700
<i class="fa fa-heart c-primary" aria-hidden="true"></i> c-primaryНаследование свойств
При размещении в тексте, иконки наследуют от текста такие параметры как размер и цвет.
это большое красное сердце
<p class="c-red t-3"><i class="fa fa-heart" aria-hidden="true"></i> это большое красное сердце</p>Иконки с фиксированной шириной
Используйте fa-fw для установки значков с фиксированной шириной. Отлично подходит для использования, когда различные значки ширины сбросили выравнивание. Особенно полезен в таких вещах, как навигационные списки и группы списков.
<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i> На главную</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i> Библиотека</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i> Редактировать</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i> Настройки</a>
</div>Список иконок
Используйте классы fa-ul и fa-li, чтобы легко заменить маркеры по умолчанию в неупорядоченных списках.
- Список иконок
- которые могут быть использованы
- как пули
- в списках
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>Список иконок</li>
<li><i class="fa-li fa fa-check-square"></i>которые могут быть</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>как пули</li>
<li><i class="fa-li fa fa-square"></i>в списках</li>
</ul>Иконки
Ниже перечислены доступные иконки. Для копирования иконки просто кликните на изображение иконки. Код иконки при этом будет скопирован в буфер обмена.