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

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


当前回答

请添加

@import 'https://****.net/*********/font-awesome.min.css';
@font-face {
    font-family: 'FontAwesome';
    src: url('https://****.net/*********/FontAwesome.otf');
    src: url('https://****.net/*********/FontAwesome.otf?#iefix')
}

这到你的css顶部,下载并正确链接css和字体,问题是由于FontAwesome没有正确加载。

谢谢

其他回答

如果您使用的是版本5。*或更大,则必须使用

all.css 或 all.min.css

包括fontawessome .css不能工作,因为它没有对webfonts文件夹的引用,也没有对@font-face或font-family的引用

你可以通过在fontawessome .css或fontawessome .min.css中搜索font-family属性来检查这一点

必须这样工作

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

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

这对我不起作用,因为我在apache配置中对根目录设置了Allow from none指令。下面是我如何让它工作的……

我的目录结构:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

我的index.html有:

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

我选择继续禁止访问我的根目录,而是在我的apache配置中为root/font-awesome/添加了另一个目录条目

<Directory "/path/root/font-awesome/">
    Allow from all
</Directory>

我已经从3.2.1更改为4.0.1,文件夹为font,现在称为fonts。

src: url('../font/fontawesome-webfont.eot?v=3.2.1');

src: url('../fonts/fontawesome-webfont.eot?v=4.0.1');