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

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

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

当前回答

我已经从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');

2013-11-01 18:59:09

其他回答

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

2013-01-16 19:29:50

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

2015-07-28 14:50:49

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

我有这个问题。问题是我有一个字体家族的CSS样式!重要覆盖fontawesome字体。

2015-04-21 19:11:42

这么多答案，所以我添加了我的工作为我(更改名称，如果你不使用PRO): 在_typography.less

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
  .lib-font-face(
    @family-name: @font-family-name__fontawsomeregular,
    @font-path: '@{baseDir}fonts/webfonts/fa-regular-400',
    @font-weight: 400,
    @font-style: normal
  );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomelight,
    @font-path: '@{baseDir}fonts/webfonts/fa-light-300',
    @font-weight: 300,
    @font-style: normal
   );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomebrands,
    @font-path: '@{baseDir}fonts/webfonts/fa-brands-400',
    @font-weight: normal,
    @font-style: normal
  );
  .lib-font-face(
    @family-name: @font-family-name__fontawsomesolid,
    @font-path: '@{baseDir}fonts/webfonts/fa-solid-900',
    @font-weight: 900,
    @font-style: normal
  );
}

在_theme.less

@import '../includes/fontawesome/fontawesome.less';
@fa-font-path: '@{baseDir}fonts/webfonts';

//  Fonts
@font-family-name__fontawsomeregular: 'Font Awesome 5 Pro';
@font-family-name__fontawsomelight: 'Font Awesome 5 Pro';
@font-family-name__fontawsomebrands: 'Font Awesome 5 Brands';
@font-family-name__fontawsomesolid: 'Font Awesome 5 Pro';

用法示例:

 .my-newclass:before{
     content: '\f002';
     display: inline-block;
     float: left;
     font-family:  @font-family-name__fontawsomelight;
     font-size: 16px;
}

2019-01-07 14:07:34

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

推荐文章

最新文章

标签