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

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


当前回答

如果您使用的是版本5。*或更大,则必须使用

all.css 或 all.min.css

包括fontawessome .css不能工作,因为它没有对webfonts文件夹的引用,也没有对@font-face或font-family的引用

你可以通过在fontawessome .css或fontawessome .min.css中搜索font-family属性来检查这一点

其他回答

检查以确保您没有无意中更改图标上的字体族。如果你改变了。fa项目的字体族从:FontAwesome图标将不会显示。总是一些愚蠢的小事情。

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

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

<i class=“fas fa-camera”></i>

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

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

我也有同样的问题,字体awesome 5下载纱线, 我添加了min.css文件和all.js文件。

希望这能帮助到某人

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>

我遇到了这个问题,仔细地走了每一步……尽管我已经使用FA很多年了……然后我意识到我的邮件css文件中有这一行:

* {
font-family: Arial !important;
}

愚蠢的错误,但这可能会在将来提示某人!