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

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


当前回答

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

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

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

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

其他回答

与上层阶级一起使用

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

现在在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开始,如果您从此站点下载了软件包:

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">

如果你通过包管理器(yarn或npm)安装了font-awesome,请注意安装的是哪个版本。或者,如果你很久以前就安装了font-awesome,检查一下安装的版本。

本质上,通过包管理器安装的版本可能落后于https://fontawesome.com/网站上显示的版本。因此,今天(2019年6月21日)包管理器将安装v4.7.0作为最新版本,但网站将指向v5.*的文档。

解决方案,访问v4.7.0的图标文档网站https://fontawesome.com/v4.7.0,复制适当的图标,例如<i class="fa fa-sign-in" aria-hidden="true"></i>,并将其合并到您的html中。更多信息可以在这里找到。

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

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

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

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