所以我试图原型营销页面,我使用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开始,如果您从此站点下载了软件包:

https://fontawesome.com/download

字体在all.css和all.min.css文件中。

这是现在使用最新版本(替换为您的文件夹)的参考文件的样子:

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">

其他回答

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

对于字体文件,必须将标题Access-Control-Allow-Origin返回为*

在苦苦寻找解决方案,但发现官方文档没有帮助之后,这为我解决了问题:

下载fontawessome .zip。我使用版本5.10.2,我得到了它从这里https://fontawesome.com/download 在zip文件中有几个文件夹。你只需要css和webfonts文件夹 在你的web项目中创建2个文件夹,命名为css和webfonts。

这些名字是必须的。现在从压缩文件中复制css和webfonts的内容到项目中的相应文件夹中。这就是全部!

当心fontawesome !卓越就是让事情变得简单!

仔细检查fontawessome -all.css文件-在最底部会有一个webfonts文件夹的路径。我的……“/webfonts”格式,这意味着CSS文件将从它所在的位置往上看一级。由于我所有的css文件都在css文件夹中,我将字体添加到同一个文件夹中,这是行不通的。

只要把你的字体文件夹向上移动一个级别,一切都应该很好:)

用字体Awesome 5.0测试

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