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

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

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

当前回答

你必须有2个类，fa类和类识别所需的图标fa-twitter, fa-search，等等…

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

引导5更新

注意:“fa前缀在版本5中已弃用。新的默认是fas固态样式和fab品牌样式。”- Terje Solem

2014-02-16 20:19:01

其他回答

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

2013-01-16 19:29:50

使用这个

<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

如果MIME TYPE已经具有.woff和.woff2文件类型，并且仍然给出HTTP-404错误，请检查请求过滤。如果这是限制性的，添加这些文件类型这些允许服务，它将工作。点击这里查看详情！

2020-01-15 08:51:05

如果你通过包管理器(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

你必须有2个类，fa类和类识别所需的图标fa-twitter, fa-search，等等…

<!-- Wrong -->
<i class="fa-search"></i>    

<!-- Correct -->
<i class="fa fa-search"></i>

引导5更新

注意:“fa前缀在版本5中已弃用。新的默认是fas固态样式和fab品牌样式。”- Terje Solem

2014-02-16 20:19:01

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

推荐文章

最新文章

标签