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

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


当前回答

在(免费的)Font Awesome 5版本中,有一个小细节对我来说很难理解,我没有注意到它:

Style   Availability    Style Prefix    Example Rendering
Solid   Free            fas             <i class="fas fa-camera"></i>
Brands  Free            fab             <i class="fab fa-font-awesome"></i>

(摘自文档)

因此,品牌图标如fa-twitter或fa-react需要与类fab一起使用,而所有其他(免费)图标需要与类fas一起使用。这很容易监管。

其他回答

仔细检查fontawessome -all.css文件-在最底部会有一个webfonts文件夹的路径。我的……“/webfonts”格式,这意味着CSS文件将从它所在的位置往上看一级。由于我所有的css文件都在css文件夹中,我将字体添加到同一个文件夹中,这是行不通的。

只要把你的字体文件夹向上移动一个级别,一切都应该很好:)

用字体Awesome 5.0测试

在我的例子中,我只是复制

<i class="fa-solid fa-tags"></i> //provided by font awesome

对于现有的前端模板,包括一些其他图标从字体真棒,但这没有工作,所以通过添加'fas'类,它工作;

<i class="fas fa-solid fa-tags"></i> //working

你必须有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样式!重要覆盖fontawesome字体。

如果您的服务器是IIS,请确保添加正确的MIME以提供.woff文件扩展名。 正确的MIME是application/octet-stream