twitter-bootstrap 在引导程序中使用 Font Awesome 而不覆盖字形
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14992156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use Font Awesome in bootstrap without overriding glyphs
提问by lostintranslation
I would like to use some Font Awesome fonts in my bootstrap application. It is a legacy application and the customer does not want new icons. The current icons are bootstrap glyphs. Font Awesome icons are very close but not the same. No big deal right? Shouldn't I be able to use a font-family to use Font Awesome and just put the right font in for the icon I want.
我想在我的引导程序应用程序中使用一些 Font Awesome 字体。这是一个遗留应用程序，客户不想要新图标。当前图标是引导程序字形。Font Awesome 图标非常接近但不一样。没什么大不了的吧？我不应该能够使用字体系列来使用 Font Awesome 并为我想要的图标添加正确的字体。
I have the Font Awesome 'fonts' directory in my project. It contains 4 files:
我的项目中有 Font Awesome 'fonts' 目录。它包含4个文件：
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.tff
fontawesome-webfont.woff
What css do I need to add to get this to work?
我需要添加什么 css 才能让它工作？
What should my html markup looklike? I have seen examples like this:
我的 html 标记应该是什么样的？我见过这样的例子：
<g><text x="0" y="0"></text></g>
However when I do that it doesn't work. I know I am missing a few steps. Any ideas?
但是，当我这样做时，它不起作用。我知道我错过了几个步骤。有任何想法吗？
回答by Blaze
I replaced all the "icon-" for "fw-icon-" in the font-awesome.css file. Then, all the bootstrap icons still the same, and if I need to use a FontAwesome icon or class, I just need to use "fw-" in the front.
我将 font-awesome.css 文件中的所有“icon-”替换为“fw-icon-”。然后，所有引导程序图标仍然相同，如果我需要使用 FontAwesome 图标或类，我只需要在前面使用“fw-”。
Example:
例子：
<i class="fw-icon-2x fw-icon-star" data-toggle="tooltip" title="Starred"></i>
Edit:
编辑：
Today, Font Awesome 4.0 was released and all the classes are different to the Bootstrap's icons pattern:
今天，Font Awesome 4.0 发布了，所有的类都与 Bootstrap 的图标模式不同：
<i class="fa fa-camera-retro"></i> fa-camera-retro
Here you can see: http://fontawesome.io/examples/
在这里你可以看到：http: //fontawesome.io/examples/
回答by Robin
I think this isn't possible until you rename any CSS classes which Font Awesome defines. Font Awesome is meant to be an replacement for Bootstrap's icons and hence redefines any icon-*classes.
我认为这是不可能的，除非您重命名 Font Awesome 定义的任何 CSS 类。Font Awesome 旨在替代 Bootstrap 的图标，因此重新定义了任何icon-*类。
回答by Shail
Important* to use both glyphicons and fontawesome you will have to disable icons with same name . Suppose You want to use Glyphicons icon-screenshotthan disable it in fontawesome .
And those icons which you want to use from fontawesome disable them in glyphicons .
First step is to include fontawesome css file into the head section after the bootstrap.css file,example:
重要* 要同时使用 glyphicons 和 fontawesome，您必须禁用具有相同名称的图标。假设您想使用 Glyphicons 而icon-screenshot不是在 fontawesome 中禁用它。
你想从 fontawesome 使用的那些图标在 glyphicons 中禁用它们。第一步是在 bootstrap.css 文件之后的 head 部分中包含 fontawesome css 文件，例如：
If you want to use icon-filefrom fontawesome Than just disable it in bootstrap.css . Like this
/* icon-file {
background-position: -24px -24px;
} */
如果你想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>
See Jsfiddle Jsfiddle with font awesome
见 Jsfiddle Jsfiddle 字体真棒
A simple button with fontawesome icon:-
一个带有超赞图标的简单按钮：-
<a class="btn" href="#">
<i class="icon-repeat"></i> Repeat</a>
Nav Pills with font awesome :-
Nav Pills 字体很棒：-
<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>
Insert space between the closing i tag and the words you type after it .
在结束的 i 标签和您在它后面键入的词之间插入空格。
