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

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


当前回答

我尝试了上面的一些建议,但都没有成功。

我使用NuGeT包。 (出于某种原因)有多个命名版本(font-awesome, fontawesome, font。太棒了,等等)。

无论如何: 我删除了所有安装的版本,然后只安装了最新版本的font.awesome。字体。Awesome不需要调整或配置任何东西就可以工作。

我认为在其他已命名的版本中有许多东西是缺失的。

其他回答

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

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

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

在我的例子中,我只是复制

<i class="fa-solid fa-tags"></i> //provided by font awesome

对于现有的前端模板,包括一些其他图标从字体真棒,但这没有工作,所以通过添加'fas'类,它工作;

<i class="fas fa-solid fa-tags"></i> //working

如果你使用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

现在在fontawesome 5中,你可以通过Https传输一个缓存版本的JS。

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

更多信息https://fontawesome.com/get-started/svg-with-js

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

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

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

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