Вопрос по html, css, twitter-bootstrap – Как работает значок Twitter Bootstrap <i…>? [Дубликат]

14

На этот вопрос уже есть ответ:

Должен ли я использовать тег <i> для иконок вместо <span>? [закрыто 7 ответов

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

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

Я знаю, я просто не был уверен, так ли это просто. Но теперь я знаю, благодаря вам, ребята. Ууу: D werdnanoslen
Обратите внимание, чтоBootstrap 3 используетspan. unor

Ваш Ответ

5   ответов
18
[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;
}
Я не думалi устарела в HTML5? MichaelRushton
i не кажется устаревшим в HTML5, см. W3.org / HTML / WG / проекты / html / мастер / ... romario333
Извините, вы правы. Это не устарело, вместо этого изменилось использование <i>. David Nguyen
18

<i>лементы @ в их примере разметки дляCSS Sprites. Неважно, какой тег используется, но HTML5 дал<i> а также<b> новая жизн и смысловой смысл:

http: //www.w3.org/TR/html5/the-i-element.htm

Элемент i представляет диапазон текста альтернативным голосом или настроением или иным образом смещается по сравнению с обычной прозой, что указывает на другое качество текста, такое как таксономическое обозначение, технический термин, идиоматическая фраза из другого языка, мысль или название корабля в западных текстах.

лементы @Empty всегда являются признаком «менее чем идеально семантической» разметки, но в конце концов многие люди просто используют то, что выполняет свою работу. Можно утверждать, что значки являются Презентация и нет Содержание, так<img> может быть не совсем уместным, а фоновые изображения лучше (плюс меньше http запросов).

Если тебе нравится, как я время от времени, привыкаешь, ты можешь добавить туда текст:

<span class="icon icon-ok">OK</span>

Затем сделайте стиль с помощью CSS, чтобы скрыть текст с чем-то вродеtext-indent:-999px (загрузчик, вероятно, уже делает это). Так что, в основном, он просто стилизован как блочный элемент с фиксированной высотой и шириной, с фоновым изображением.

Просто как небольшое напоминание / предупреждение: если я правильно помню, скрытие текста любыми средствами может все еще считаться плохим поисковыми системами. Если вы хотите добавить значку значку, вы можете, например, использовать атрибут title или другие параметры доступности. All Bits Equal
0

только класс. Вы могли бы использовать<span class="icon-question-sign></span> или что угодно.

<i> однако короче, чтобы написать иi может обозначать значок.

Он умирает, если браузер имеет свой собственный стиль <a>,<div>,<p> ...).<i> @ есть предполагаемое семантическое значение, с которым иконическое использование не особенно подходит, поэтому я не понимаю, почему следует использовать<i> над<span> потому что набирать легче. Что касается переносимости кода,<i> редко встречается, поэтому есть только возможность закопаться в Twitter Bootstrap или получить код, который может не проверяться. Alastair
0

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

Пустые теги семантически неверны. я не имею ничего общего со значком.

PS, использующий отступ текста для скрытия текста, недоступен, поэтому не используйте его.

Когда ты говоришь «доступно», ты имеешь в виду доступность для чтения с экрана? shortstuffsushi
-3

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

Похожие вопросы