Question

我想在我的bootstrap应用程序中使用一些Font Awesome字体。它是一个遗留应用程序，客户不需要新图标。当前图标是bootstrap字形。 Font Awesome图标非常接近但不一样。没什么大不了的？我不应该使用font-family来使用Font Awesome，只需将正确的字体放入我想要的图标中。

我的项目中有Font Awesome'fonts'目录。它包含4个文件：

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

我需要添加什么css才能使其正常工作？

我的html标记应该是什么样的？我见过这样的例子：

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

然而，当我这样做时，它不起作用。我知道我错过了几步。有什么想法吗？

Answer 1

我在font-awesome.css文件中替换了“fw-icon-”的所有“icon-”。然后，所有引导程序图标仍然相同，如果我需要使用FontAwesome图标或类，我只需要在前面使用“fw-”。

示例：

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

编辑：

今天，Font Awesome 4.0发布了，所有类都与Bootstrap的图标模式不同：

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

您可以在此处看到：http://fontawesome.io/examples/

Answer 2

我认为在重命名Font Awesome定义的任何CSS类之前，这是不可能的。 Font Awesome旨在替代Bootstrap的图标，因此重新定义了任何图标 - * 类。

Answer 3

重要*要同时使用glyphicons和fontawesome，您必须禁用具有相同名称的图标。假设您想要使用Glyphicons icon-screenshot而不是在fontawesome中禁用它。
那些您想要使用fontawesome的图标会禁用它们的glyphicons。第一步是在bootstrap.css文件之后将fontawesome css文件包含在head部分中，例如：

如果你想使用fontawesome中的 icon-file而不是在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 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>

在结束i标记和后面键入的单词之间插入空格。

在引导程序中使用Font Awesome而不覆盖字形

3 个答案: