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

其他回答

必须这样工作

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

使用这个

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

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

使用绝对路径代替相对路径解决了这个问题。我使用的是相对路径(见下面的第一个例子),但这行不通。我通过控制台检查,发现服务器返回404,文件没有找到。

相对路径导致404:

@font-face { 
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

绝对路径解决它跨浏览器:

@font-face { 
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

除非迫不得已,否则我不建议你这么做,但这对我来说很管用。当然,您应该对font-awesome.css文件中的所有字体格式重复此操作。

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

我遇到了这个问题,仔细地走了每一步……尽管我已经使用FA很多年了……然后我意识到我的邮件css文件中有这一行:

* {
font-family: Arial !important;
}

愚蠢的错误,但这可能会在将来提示某人!