4

我想在我的引导应用程序中使用一些 Font Awesome 字体。这是一个遗留应用程序，客户不想要新图标。当前的图标是引导字形。Font Awesome 图标非常接近但不一样。没什么大不了的吧？我不应该能够使用字体系列来使用 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>

但是，当我这样做时，它不起作用。我知道我错过了几个步骤。有任何想法吗？

4

3 回答 3

8

我将 font-awesome.css 文件中的所有“icon-”替换为“fw-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/

于 2013-05-14T13:22:13.353 回答
0

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

于 2013-02-21T13:38:23.097 回答
-1

重要* 要同时使用 glyphicons 和 fontawesome，您必须禁用具有相同名称的图标。假设您想使用 Glyphiconsicon-screenshot而不是在 fontawesome 中禁用它。
而那些你想在 fontawesome 中使用的图标会在 glyphicons 中禁用它们。第一步是在 bootstrap.css 文件之后的 head 部分中包含 fontawesome 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 字体真棒

一个带有 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 标记和您在其后键入的单词之间插入空格。

于 2013-02-21T01:41:24.833 回答