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

其他回答

现在在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

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

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

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

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

必须这样工作

确保你有fontawesome CDN链接在你的页面顶部 fontawesome cdn 确保.fa类没有被赋予另一个font-family属性。当我们给页面中的所有标记一个样式时,通常会发生这种情况。像这样

* { 字体类型:Arial; }

而是使用这个

*:没有(.fa) { 字体类型:Arial; }

确保你输入的是fontawesome网站上给出的确切的类名。复制粘贴以确保。

如果你正在使用Cloudflare CDN,你可以使用下面的链接标签在你的页面中使用字体awesome <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <i class="fa fa-home"></i>

/css/all.css文件包含核心样式和所有图标样式,当你使用字体Awesome时需要。/webfonts文件夹包含了上面CSS引用和依赖的所有字体文件。

复制整个/webfonts文件夹和/css/all.css到你的项目的静态资产目录(或任何你喜欢保留前端资产或供应商的东西)。

将复制的/css/all.css文件的引用添加到你想要使用字体Awesome的每个模板或页面。

只需访问- https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 你会得到答案的。

使用这个

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

我有类似的问题与亚马逊Cloudfront CDN,但它得到了解决后,我开始加载它从maxcdn