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

所以我试图原型营销页面，我使用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>

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

当前回答

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

2013-05-23 08:21:26

其他回答

经过5个多小时的挣扎，我找到了问题的原因。

使用FontAwesome 5，你应该使用fas(注意“s”在结尾):

我使用的是“常规”字体，显然在这个版本中是付费的——我切换到“固态”字体，一切都开始正常工作。

2021-04-16 19:10:07

使用这个<i class="fa fa-camera-retro" ></i>你还没有定义fa类

2016-09-21 08:48:51

我试着用之前的几个解决方案来解决同样的问题，但它们在我的情况下不起作用。最后，我在HEAD中添加了这2行，它起作用了:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">

2015-04-08 07:23:00

如果你使用sass并且已经导入了main.scss @ import“. . /供应商/ font-awesome / scss / font-awesome.scss”;

错误可能来自字体-awesome。查找相对路径中的字体文件的SCSS文件。

所以记得重写$fa-font-path变量: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" !

这样就不需要在index.html中添加CDN

2015-08-11 17:43:20

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

2013-01-16 19:29:50

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

推荐文章

最新文章

标签