Дублированный значок значок с Twitter Bootstrap и шрифт Awesome

У меня проблема с этим меню с иконками, использующими бутстрап и шрифт, потрясающие, как в меньшем формате, так и скомпилированные во время выполнения с JavaScript.

Оба черно-синих появляются одновременно!

Код:

<div class="well sidebar-nav">
    <ul class="nav nav-list">
        <li class="nav-header">Relatórios</li>
          <li><a href="#"><i class="icon-facebook-sign"></i> Acessos na s-Commerce</a></li>
          <li><a href="#"><i class="icon-shopping-cart"></i> Acessos para a loja</a></li>
    </ul>
</div>

Выход браузера:

Duplicated Icon

Ответы

Ответ 1

Когда я писал этот вопрос, мне пришло в голову удалить спрайты. Без включения бутстрапа. Исправлено и работало как шарм.

Ответ 2

с новой версией bootstrap, что я сделал в CSS, было следующее:

  [class^="icon-"], [class*=" icon-"]{
    background:none;
  }

работал как шарм:)

Ответ 3

Пришлось добавить это в мой CSS

[class^="icon-"], [class*=" icon-"]{
    background:none!important;
}

.btn [class^="icon-"], .btn [class*=" icon-"] {
    line-height: 1.3em;
}

Ответ 4

Эй, я столкнулся с одной и той же проблемой в этот день, но я, похоже, решил ее, добавив исправление стилей ниже font-awesome.css и bootstrap.css, так как я не могу использовать LESS в моей ситуации.

<style type="text/css"> .icon {background:none;} </style>

Надеюсь, что это поможет кому-то.

Ответ 5

Если вы используете файл исправления IE 6 или 7 JS lte-ie7.js без указания, если < IE 8, вы также получите двойные значки.

<!--[if lt IE 8]>
<script src="lte-ie7.js"></script>
<![endif]-->

Ответ 6

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

В этом случае шрифт накладывается на изображение.

они предоставляют версию специально для этого случая

Как вы видите, есть 3 основные версии CSS:

  • complete: main + отзыв + значок
  • без значка: main + отзыв
  • без реагирования: main + icon

ссылка

//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css

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