字体真棒不工作，图标显示为正方形

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

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

当前回答

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

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

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

2014-02-25 23:38:56

其他回答

必须这样工作

确保你有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>

2020-03-10 18:56:33

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

2018-04-03 12:55:35

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

2016-09-21 08:48:51

截至2018年12月，我发现使用bootstrapcdn上的稳定版本4.7.0比使用字体很棒的5.x更容易。x cdn在他们的网站上——因为每次他们升级小版本，以前的版本都会崩溃。

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

图标是一样的:

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

2018-12-27 19:02:19

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

2015-07-28 14:50:49

字体真棒不工作，图标显示为正方形

推荐文章

最新文章

标签