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

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

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

当前回答

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

2015-04-21 19:11:42

其他回答

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

与上层阶级一起使用

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

2018-06-12 11:36:57

现在在fontawesome 5中，你可以通过Https传输一个缓存版本的JS。

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

更多信息https://fontawesome.com/get-started/svg-with-js

2018-04-03 12:55:35

从版本5开始，如果您从此站点下载了软件包:

https://fontawesome.com/download

字体在all.css和all.min.css文件中。

这是现在使用最新版本(替换为您的文件夹)的参考文件的样子:

<link href="/MyProject/Content/fontawesome-free-5.10.1-web/css/all.min.css" rel="stylesheet">

2019-08-13 19:29:31

截至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

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

推荐文章

最新文章

标签