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

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

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

当前回答

使用这个

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

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

2014-09-17 09:21:35

其他回答

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

2016-09-21 08:48:51

从版本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">

2019-08-13 19:29:31

检查以确保您没有无意中更改图标上的字体族。如果你改变了。fa项目的字体族从:FontAwesome图标将不会显示。总是一些愚蠢的小事情。

2014-06-12 17:56:29

如果你通过包管理器(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中。更多信息可以在这里找到。

2019-06-21 11:47:42

我使用字体Awesome 4.3.0只是链接从maxcdn工作在这里提到，

但是在你的服务器上，把字体和CSS放在同一个文件夹里对我来说是有效的，就像这样

然后只需链接CSS:

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />

2015-05-07 10:19:10

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

推荐文章

最新文章

标签