9

我正在尝试使用 Font Awesome，但它只是显示任何亚洲标志，而不是任何图标。为此，我通过网络服务器将字体 awsome 下载到了。我在 3 种不同的浏览器（firefox、opera 和 chromium）中尝试过这个，但它总是一样的。

可以在这里看到一个测试页：http: //2weitweitweg.de/test.html

这是它的截图：http: //postimg.org/image/9yh5p0p97/

它是否在您的浏览器中显示标志？问题与浏览器或服务器有关吗？我该如何解决？

再见

4

6 回答 6

9

我遇到了这个问题，这是因为我使用的是旧的 html 和一个新的fontawesome版本。

我通过更改来修复它：

<i class="fa-bitbucket"></i>

至：

<i class="fa fa-bitbucket"></i>

即我只需要将默认fa类添加到元素中。

最新版本使用fa前缀，但对你来说，我猜它可能是icon。

希望这可以帮助某人在某个阶段:-)

于 2013-10-26T01:52:27.163 回答
5

很可能没有找到实际的字体文件。如果您查看 font awesome CSS 文件，您可能会看到类似以下内容：

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
    [...etc]

这期望在与 CSS 文件位于同一级别的名为 font 的文件夹中找到字体文件。例如：

myproject / css
                 / font-awesome.css
                   [...etc]
          / font
                 / fontawesome-webfont.eot
                   [...etc]

如果文件位于正确的位置，则可能是因为权限问题而没有加载它们，或者甚至您使用的浏览器不正确地支持@font-face。当然，您可以通过浏览字体真棒示例页面以查看它是否正确显示图标来排除后者。

于 2013-08-30T14:58:28.383 回答
2

希望我还不算太晚，您服务器上的某些内容配置不正确，解决方案是允许像使用 *.css 和 *.js 一样请求静态资源一样请求 *.woff 和 *.tff，这是根据平台做不同的事情：

在此处输入图像描述

我做了什么使它工作：

将您的样式表替换为（因为我们无法获取资源）：

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">

并替换了旧的 icon-* 类，例如：

<i class="fa-umbrella fa text-error"></i>

现在它起作用了：

在此处输入图像描述

于 2013-12-10T00:32:46.350 回答
0

如果您使用 4.0 或更高版本，他们已将类更改icon为fa类所以您的代码应该说

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

代替

    <i class="icon icon-camera-retro icon-large"></i>

您可以通过访问http://fontawesome.io/icons/并单击/点击您需要的图标来找到图标、特定代码示例。

从 3.2 升级到 4.0.3 时我遇到了同样的问题

于 2013-12-02T06:06:00.173 回答
0

运行以下命令

npx react-native 链接 react-native-vector-icons

于 2020-07-18T09:37:11.403 回答
0

使用 fontawesone 5.15.1 我必须这样做才能显示 Linux 图标：

<i class="fab fa-linux icon"></i>

重要提示：使用“ fab ”而不是“fa”，因为 Linux 被视为“品牌”。

于 2020-10-08T11:24:35.557 回答