字体真棒不工作，图标显示为正方形

所以我试图原型营销页面，我使用Bootstrap和新的字体Awesome文件。问题是，当我尝试使用图标时，所有在页面上呈现的都是一个大正方形。

以下是我如何将文件包含在头部:

<head>
        <title>Page Title</title>
        <link rel="stylesheet" href="css/bootstrap.css">
        <link rel="stylesheet" href="css/bootstrap-responsive.css">
        <link rel="stylesheet" href="css/font-awesome.css">
        <link rel="stylesheet" href="css/app.css">
        <!--[if IE 7]>
            <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
        <![endif]-->
</head>

这是我尝试使用图标的一个例子:

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

但所有这些都被渲染在一个大正方形中。有人知道这是怎么回事吗?

当前回答

与上层阶级一起使用

<div class="container">
  <i class="fa fa-facebook"></i>
</div>

2018-06-12 11:36:57

其他回答

如果您的服务器是IIS，请确保添加正确的MIME以提供.woff文件扩展名。正确的MIME是application/octet-stream

2013-05-23 08:21:26

我今天找到了一个解决方案:

从他们的Github页面下载整个项目然后按照他们页面上Default CSS部分中关于将目录移动到项目和在.html文件的HEAD部分中添加链接的其余步骤进行操作

他们的文档的问题是，他们没有指定一个链接，您应该在哪里获得整个字体的副本，并将其放入您的项目中。

2014-02-25 23:38:56

与上层阶级一起使用

<div class="container">
  <i class="fa fa-facebook"></i>
</div>

2018-06-12 11:36:57

我使用官方字体Awesome SASS Ruby Gem，并通过添加以下行到我的application.css.scss来修复错误

@import "font-awesome-sprockets";

解释:

font-awesome-sprockets文件包括sprockets资产助手Sass函数，用于查找字体文件的正确路径。

2014-09-03 00:40:46

根据文档(步骤3)，您需要修改提供的CSS文件以指向站点上的字体位置。

2013-01-16 19:29:50

字体真棒不工作，图标显示为正方形

推荐文章

最新文章

标签