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

所以我试图原型营销页面，我使用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没有正确加载。

谢谢

2019-03-16 05:46:16

其他回答

我的问题在于

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

在一个

<!-- build:css assets/styles/main.css -->
<!-- endbuild -->

tag

我把它放在标签的外面。

2015-12-18 22:50:35

这可能是你的字体路径不正确，使css无法加载字体和呈现图标，所以你需要提供附加字体的搁浅路径。

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

2016-09-21 08:42:48

使用这个<i class="fa fa-camera-retro" ></i>你还没有定义fa类

2016-09-21 08:48:51

我也有同样的问题，字体awesome 5下载纱线，我添加了min.css文件和all.js文件。

希望这能帮助到某人

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>

2019-11-09 21:42:58

你必须有两个类，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

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

推荐文章

最新文章

标签