字体令人敬畏地显示亚洲标志而不是图标

Jon*_*nas 5 firefox opera icons chromium font-awesome

我正在尝试使用Font Awesome而不是任何图标,它只显示任何亚洲标志.我为web服务器下载了字体awsome.我在3种不同的浏览器(firefox,opera和chromium)中尝试了这个,但它总是一样的.

可在此处查看测试页:http://2weitweitweg.de/test.html

以下是它的截图:http://postimg.org/image/9yh5p0p97/

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

再见

小智 8

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

我修改了它:

<i class="fa-bitbucket"></i>
Run Code Online (Sandbox Code Playgroud)

至:

<i class="fa fa-bitbucket"></i>
Run Code Online (Sandbox Code Playgroud)

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

最新版本使用fa前缀,但对你来说,我想它可能是icon相反的.

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


Gar*_*son 5

很可能没有找到实际的字体文件.如果您查看字体真棒CSS文件,您可能会看到如下内容:

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

这期望在CSS文件所在的同一级别找到名为font的文件夹中的字体文件.例如:

myproject / css
                 / font-awesome.css
                   [...etc]
          / font
                 / fontawesome-webfont.eot
                   [...etc]
Run Code Online (Sandbox Code Playgroud)

如果文件位于正确的位置,则可能由于某些权限问题而未加载它们,甚至您使用的是一个不正确支持@ font-face的奇怪浏览器.当然,您可以通过浏览字体真棒示例页面来排除后者,看它是否正确显示图标.