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

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

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

当前回答

为我(在我的Windows 7机器上)解决问题的是解密我的项目目录。在测试你的网站时，会有很多视觉和功能上的小故障。只需进入命令提示符并运行:

attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%

.．.其中%PROJECT_PATH%是存放代码的目录的完整路径名。

2017-09-25 15:29:11

其他回答

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

截至2018年12月，我发现使用bootstrapcdn上的稳定版本4.7.0比使用字体很棒的5.x更容易。x cdn在他们的网站上——因为每次他们升级小版本，以前的版本都会崩溃。

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

图标是一样的:

<i class="fa fa-facebook"></i>

2018-12-27 19:02:19

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

2013-01-16 19:29:50

你必须有两个类，fas类和fa-*类。参考文档中的基本用法:

fa前缀在版本5中已弃用。新的默认是fas实体样式和fab品牌样式。

// Correct (version >= 5)
<i class="fas fa-search"></i>    

// Wrong (version < 5)
<i class="fa fa-search"></i>

2018-05-02 10:34:58

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

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

用字体Awesome 5.0测试

2018-01-30 08:09:13

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

推荐文章

最新文章

标签