Учебники

Ionic – Иконки

Ionic предлагает более 700 премиальных иконок . Есть также различные наборы иконок для Android и IOS. Вы можете найти почти все, что вам нужно, но вы не обязаны их использовать, если не хотите. Вместо этого вы можете использовать свои собственные значки или любой другой набор значков. Вы можете проверить все ионные иконки здесь .

Как использовать иконки?

Если вы хотите использовать ионные иконки, найдите нужный значок на странице ( https://ionicons.com/ ). Когда вы добавляете элементы Ionic, вы всегда сначала добавляете основной класс, а затем добавляете нужный подкласс. Основным классом для всех значков является значок . Подкласс – это название нужного вам значка. Мы добавим шесть иконок в нашем примере, который приведен ниже –

<i class = "icon icon ion-happy-outline"></i>
<i class = "icon icon ion-star"></i>
<i class = "icon icon ion-compass"></i>
<i class = "icon icon ion-planet"></i>
<i class = "icon icon ion-ios-analytics"></i>
<i class = "icon icon ion-ios-eye"></i>

Приведенный выше код создаст следующий экран –

Ионные Иконки

Размер этих значков можно изменить с помощью свойства font-size в вашем файле Ionic CSS.

.icon {
   font-size: 50px;
}

После настройки размера значка тот же код создаст следующий снимок экрана в качестве вывода: