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

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


当前回答

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

其他回答

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

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

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

你必须有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

/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

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

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

然后只需链接CSS:

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