Поиск…


замечания

В современной веб-разработке принято использовать шрифты для отображения значков. Поскольку шрифты являются векторами, они независимы от разрешения и могут быть легко раскрашены через 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>


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow