14

Вопрос по css, twitter-bootstrap, html – Как работает иконка Twitter Bootstrap ? [дубликат]

This question already has an answer here:

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

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

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

    от
  • Я не думалi устарел в HTML5?

    от
  • i не кажется устаревшим в HTML5, см.w3.org/html/wg/drafts/html/master/…

    от
  • Извините, вы правы. Вместо этого не рекомендуется использовать & lt; i & gt; изменилось.

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

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

    от
  • Обратите внимание, чтоBootstrap 3 uses span.

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

    от werdnanoslen
5 ответов
  • -3

    Тег - это просто тег. Вы можете использовать любой тег для любых целей

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

  • 0

    Он используется для курсивного текста в HTML4 и имеет немного другой

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

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

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

  • 0

    Фактический тег не имеет значения

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

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

  • 18

    Загрузчик Twitter просто (ab) использует пустой

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

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

    The i element represents a span of text in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text, such as a taxonomic designation, a technical term, an idiomatic phrase from another language, a thought, or a ship name in Western texts.

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

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

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

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

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