Использовать шрифт Awesome в bootstrap без переопределения глифов

Я хотел бы использовать некоторые шрифты Awesome в моем загрузочном приложении. Это устаревшее приложение, и клиенту не нужны новые значки. Текущие значки - это бутстрап-глифы. Шрифт Удивительные значки очень близки, но не то же самое. Ничего страшного? Если я не могу использовать семейство шрифтов, чтобы использовать Font Awesome и просто поместить нужный шрифт в нужный значок.Использовать шрифт Awesome в bootstrap без переопределения глифов

У меня есть шрифт Awesome 'fonts' в моем проекте. Он содержит 4 файлов:

fontawesome-webfont.eot 
fontawesome-webfont.svg 
fontawesome-webfont.tff 
fontawesome-webfont.woff

Что нужно сделать, чтобы заставить это работать?

Что должно выглядеть сметами html? Я видел такие примеры:

<g><text x="0" y="0">&#xf040</text></g>

Однако, когда я это делаю, он не работает. Я знаю, что мне не хватает нескольких шагов. Есть идеи?

источник

2013-02-20 lostintranslation

проверка решения, пожалуйста, и дайте мне знать, если он работает для вас – Shail

Это может быть случай задавая неправильный вопрос. Обратите внимание, что ни один из ответов не использует литеральные символы символа Юникода. Кодовая страница пользователя целенаправленно лишена смысла, тогда как классы CSS, предоставляемые этими пакетами шрифтов, имеют явное значение. Не используйте ссылки на символы напрямую, и ваша проблема будет решена. – amcgregor

Я заменил все «icon-» для «fw-icon-» в файле font-awesome.css. Затем все значки начальной загрузки все те же, и если мне нужно использовать значок или класс FontAwesome, мне просто нужно использовать «fw-» в начале.

Пример:

<i class="fw-icon-2x fw-icon-star" data-toggle="tooltip" title="Starred"></i>

Edit:

Сегодня шрифт Высокий 4.0 был освобожден и все классы отличаются от бутстрапом в иконках схеме:

<i class="fa fa-camera-retro"></i> fa-camera-retro

Здесь вы можете увидеть: http://fontawesome.io/examples/

источник

2013-05-14 13:22:13 Blaze

Поскольку два шрифта отличаются друг от друга, а глифы находятся в кодовой странице «user» UNICODE, это правильное решение. Пространства имен. – amcgregor

-1

Важно * для использования как глификонов, так и fontawesome вам придется отключать значки с тем же именем. Предположим, вы хотите использовать Glyphicons icon-screenshot, чем отключить его в fontawesome.
И те значки, которые вы хотите использовать из fontawesome, отключите их в глификонах. Первый шаг должен включать fontawesome CSS файл в головной части после того, как файл bootstrap.css, пример:

Если вы хотите использовать icon-file из fontawesome чем просто отключить его в bootstrap.css. Нравится
/* icon-file { background-position: -24px -24px; } */

<head> 
<link rel="stylesheet" href="css/font-awesome.min.css"> 
<link rel="stylesheet" href="css/bootstrap.min.css"> 

</head>

См Jsfiddle Jsfiddle with font awesome

Простая кнопка со значком fontawesome: -

<a class="btn" href="#"> 
<i class="icon-repeat"></i> Repeat</a>

Nav Таблетки с шрифтом удивительном: -

<ul class="nav nav-pills"> 
    <li class="active"><a href="#"><i class="icon-file"></i> New File</a></li> 
    <li><a href="#"><i class="icon-cut"></i> Cut</a></li> 
    <li><a href="#"><i class="icon-edit"></i> Edit</a></li> 
    <li><a href="#"><i class="icon-paste"></i> Settings</a></li> 
</ul>

Вставить пробел между закрывающий тег i и слова, которые вы вводите после него.

источник

2013-02-21 01:41:24 Shail

Таким образом, вы заменяете значки Bootstrap шрифтом Awesome, но OP хотел иметь значки шрифтов Awesome _in addition_ для Bootstrap'ов! – Robin

Если будут использоваться значки с разными именами, можно использовать как глиф, так и fontawesome, одинаковые значки имен будут отображаться дважды. – Shail

Я думаю, что это невозможно, пока вы не переименуете какие-либо классы CSS, которые определяет шрифт Awesome. Font Awesome предназначен для замены значков Bootstrap и, следовательно, переопределяет классы icon- *.

источник

2013-02-21 13:38:23 Robin

Использовать шрифт Awesome в bootstrap без переопределения глифов

ответ

Смежные вопросы