Как работает значок Twitter Bootstrap <i...>?

При размещении значка на странице кажется, что он каким-то образом переопределяет старый, наполовину устаревший курсивный тег <i> для использования в качестве специального тега изображения. Либо это, либо это заставляет меня думать, что <i ...> - ленивая интерпретация <img ...>.

Как это работает, когда все, что требуется, является таблицей стилей, и могу ли я переопределить другие теги для своих собственных целей, например:

Ответы

Ответ 1

[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;
}

Ответ 2

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 уже делает это). Таким образом, в основном это просто стиль блока с фиксированной высотой и шириной с фоновым изображением.

Ответ 3

Фактический тег не имеет значения, просто класс. Вы можете использовать <span class="icon-question-sign></span> или что-то еще.

<i>, однако, короче, и я могу стоять на значке.

Ответ 4

Тег "i" не является сокращенным значком. Он используется для курсивного текста в HTML4 и в HTML5 имеет несколько иной контекст. Bootstrap злоупотребляли им, и многие разработчики слишком заботились о скорости над качеством или семантикой, так же злоупотребляли им.

Пустые теги семантически ошибочны. i не имеет ничего общего с значком.

PS с использованием текстового отступа, чтобы скрыть текст, недоступен, поэтому не используйте его.

Ответ 5

Тег - это только тег. Вы можете использовать любой тег для любых целей, но обычно вы хотите использовать семантически правильные теги для представления различных типов контента. Тег <i> не является устаревшим, но почти не используется, поэтому безопасный тег для Twitter Boostrap используется для этой цели, не беспокоясь о том, чтобы его переопределить чем-то другим.