Атрибут class тега <i>
Описание
Атрибут class позволяет задавать один или несколько классов для тега <i>, который традиционно используется для курсивного текста. Это позволяет стилизовать и управлять элементом через CSS и JavaScript.
<i class="icon fa fa-user"></i>
<i class="highlight">Важный текст</i>
Особенности работы:
| Характеристика | Описание | Пример |
|---|---|---|
| Множественные классы | Можно указать несколько классов через пробел | class="icon large" |
| Регистрозависимость | Чувствителен к регистру | Icon ≠ icon |
| Специфичность CSS | Влияет на приоритет стилей | .icon { } |
Современное применение тега <i>:
<!-- Иконки Font Awesome -->
<i class="fas fa-camera"></i>
<!-- Семантически нейтральный контейнер -->
<i class="special-text">Текст с особым стилем</i>
<style>
.special-text {
font-style: normal;
color: #e74c3c;
font-weight: bold;
}
</style>
Рекомендации по именованию:
- Используйте осмысленные имена (не
style1,style2) - Придерживайтесь единого стиля (BEM, kebab-case)
- Для иконок используйте префикс
icon- - Избегайте избыточных классов
Пример с CSS-анимацией:
<i class="spinner"></i>
<style>
.spinner {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(0,0,0,.3);
border-radius: 50%;
border-top-color: #3498db;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
Доступность:
- Для чисто декоративных элементов добавьте
aria-hidden="true" - Если элемент значимый, укажите его роль
role="img" - Для иконок без текста добавьте
aria-label
Примечание: Хотя тег <i> исторически использовался для курсива, в современной верстке он часто применяется для иконок и других декоративных элементов. Всегда используйте классы для стилизации вместо прямого применения тегов с семантической нагрузкой.