ionic-framework
Ionicons
Поиск…
замечания
В современной веб-разработке принято использовать шрифты для отображения значков. Поскольку шрифты являются векторами, они независимы от разрешения и могут быть легко раскрашены через CSS, чтобы назвать несколько преимуществ по сравнению с растровыми изображениями и т. Д. Ionicons был создан той же командой, что и Ionic Framework была создана и может использоваться в любом проекте с тех пор они на 100% бесплатны и с открытым исходным кодом. Лицензия MIT.
Ionicons можно использовать самостоятельно или с помощью компонентов Ionics CSS, когда они имеют определенные стили в соответствии с родительскими элементами.
Домашняя страница и список значков можно найти здесь: http://ionicons.com/
Основное использование
Значки шрифтов обычно помещаются внутри <i> . Ionic имеет стили CSS по умолчанию для значков для удобства использования. Самый простой пример использования:
<i class="icon ion-home"></i>
Расширенное использование
Ionic имеет некоторые компоненты CSS, где вы можете использовать Ionicons по умолчанию, которые имеют предустановленный стиль. Класс range в элементе <div> будет применять правильный стиль для ввода и значков внутри него. Вот пример слайдера диапазона.
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>
Другой пример использования Ionicon на вкладках Ionic, который создаст вкладку, например меню. tabs-striped tabs-color-assertive определяют стиль самих вкладок. Иконки используются с простыми тегами <i> и они получают свой позиционный стиль из классов, применяемых к родительским div.
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-b"></i>
Settings
</a>
</div>
