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

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

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

当前回答

经过5个多小时的挣扎，我找到了问题的原因。

使用FontAwesome 5，你应该使用fas(注意“s”在结尾):

我使用的是“常规”字体，显然在这个版本中是付费的——我切换到“固态”字体，一切都开始正常工作。

2021-04-16 19:10:07

其他回答

请添加

@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

我也有同样的问题，字体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

使用这个

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

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

2014-09-17 09:21:35

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

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

2016-09-21 08:42:48

在新的3.0版本中，这应该简单得多。最简单的方法是指向引导CDN: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

2013-01-18 01:32:17

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

推荐文章

最新文章

标签