При размещении значка на странице кажется, что он каким-то образом переопределяет старый, наполовину устаревший курсивный тег <i> для использования в качестве специального тега изображения. Либо это, либо это заставляет меня думать, что <i ...> - ленивая интерпретация <img ...>.
Как это работает, когда все, что требуется, является таблицей стилей, и могу ли я переопределить другие теги для своих собственных целей, например:
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
width: 14px;
height: 14px;
line-height: 14px;
vertical-align: text-top;
background-image: url("../img/glyphicons-halflings.png");
background-position: 14px 14px;
background-repeat: no-repeat;
*margin-right: .3em;
}
вы можете видеть, что тег не имеет значения, они, вероятно, использовали i, потому что хорошо... он устарел. тег изображения не будет работать в этом случае, потому что они используют лист спрайта...
.icon-glass {
background-position: 0 0;
}
Twitter-бутстрап - это просто (ab), используя пустые элементы <i> в их примерной разметке для CSS Sprites. Не имеет значения, какой тег используется, но HTML5 дал <i> и <b> новую жизнь и смысловое значение:
http://www.w3.org/TR/html5/the-i-element.html
Элемент я представляет диапазон текста в альтернативном голосе или настроении или иным образом компенсируется нормальной прозой способом, указывающим на другое качество текста, например, таксономическое обозначение, технический термин, идиоматическую фразу от другого язык, мысль или название корабля в западных текстах.
Пустые элементы всегда являются признаком разметки "менее чем идеально-семантической", но в конце дня многие люди просто используют то, что выполняет свою работу. Можно утверждать, что значки являются презентацией, а не содержимым, поэтому <img> может быть не совсем подходящим, а фоновые изображения лучше (плюс меньше HTTP-запросов).
Если вам нравится время от времени получать реальную информацию, как я делаю, вы можете добавить туда текст:
<span class="icon icon-ok">OK</span>
Затем создайте его с помощью CSS, чтобы скрыть текст с помощью чего-то вроде text-indent:-999px (возможно, bootstrap уже делает это). Таким образом, в основном это просто стиль блока с фиксированной высотой и шириной с фоновым изображением.
Фактический тег не имеет значения, просто класс. Вы можете использовать <span class="icon-question-sign></span> или что-то еще.
<i>, однако, короче, и я могу стоять на значке.
Тег "i" не является сокращенным значком. Он используется для курсивного текста в HTML4 и в HTML5 имеет несколько иной контекст. Bootstrap злоупотребляли им, и многие разработчики слишком заботились о скорости над качеством или семантикой, так же злоупотребляли им.
Пустые теги семантически ошибочны. i не имеет ничего общего с значком.
PS с использованием текстового отступа, чтобы скрыть текст, недоступен, поэтому не используйте его.
Тег - это только тег. Вы можете использовать любой тег для любых целей, но обычно вы хотите использовать семантически правильные теги для представления различных типов контента. Тег <i> не является устаревшим, но почти не используется, поэтому безопасный тег для Twitter Boostrap используется для этой цели, не беспокоясь о том, чтобы его переопределить чем-то другим.