FontAwesome图标未显示。为什么？

123

最近，我一直在开发此网站，并且试图在其中添加超棒的字体图标，以便可扩展。

问题是他们没有露面。

看一下HTML：

<a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>

要么

<li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>

我确实把样式表引用放在了头上。

我不知道为什么他们没有出现。

这里是参考：

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

好了，这是完整的html：

<head>
    <meta charset="UTF-8">
    <title>Retrica</title>
    <link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link href="style/normalize.css" rel="stylesheet" type="text/css">
    <link href="style/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="style/main.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="top-header">
        <div class="container"><!-- Start Container -->
            <div class="row"><!-- Start Row -->
                <div class="span3"><!-- Start Span3 -->
                    <div class="logo"><img src="img/Retrica.@2x.png" alt="" width="67px" height="13,5px"></div>
                </div><!-- End Span3 -->
                <div class="span9"><!-- Start Span9 -->
                    <nav class="main-nav">  <!-- Start Nav -->

                        <a class="btn-cta-freequote" href="#">Get a FREE Quote <i class="fa fa-arrow-right"></i></a>
                        <ul class="nav-ul"> <!-- Start Unordered List -->
                            <li><a href="index.html"><span class="fa fa-home fa-2x"></span>Home</a></li>
                            <li><a href="#"><span class="fa fa-mobile-phone fa-2x"></span> Contact Us</a></li>

                        </ul> <!-- End Unordered List -->
                    </nav><!-- End Nav -->
                </div><!-- End Span9 -->
            </div><!-- End Row -->
        </div><!-- End Container -->
    </header>

    <section>

        <a href="#" class="btncta">Register Now</a>
    </section>

</body>
html  css  font-awesome 
— 路易斯·瓦尔迪兹
source
1
对我来说效果
— Shahar
— 西罗桑蒂利郝海东冠状病六四事件法轮功
1
请尝试其他版本的font-awesome。例如，有些图标在4.3.0版本上没有显示给我，但确实在4.7.0上出现了。
— 阿米尔·坎波斯
请检查stackoverflow.com/a/55977898/4874281。希望它能对某人
— 有所

Answers:

105

根据您的参考，您有：

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

具体来说，就是这个href=部分。

但是，在您的完整HTML下是这样的：

<link src="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

您是否尝试过更换src=与href=您的全HTML变成这样？

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

为我工作：http : //codepen.io/TheNathanG/pen/xbyFg

— 内森·G
source
10
注意：有时您可能会看到一个空框，然后再次检查您是否在同一文件夹中有css和fonts文件，请检查此项，希望对您有所帮助。
— shaijut 2015年
104

对于缺少字体真棒图标的搜索者，我收集了一些想法：

  • 确保使用正确的CDN链接，例如：

    <link 
  href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

  • 如果您的页面使用HTTPS，您是否使用HTTPS链接到超酷的CSS（在上面的链接中替换http://为https://）。

  • 仔细检查您是否未启用AdBlock Plus或uBlock。他们可能阻止了某些图标。

  • 重置浏览器缓存。（在Chrome上，只需单击重新加载按钮，然后选择“重置硬盘缓存”即可）

  • 确保使用的<span>or <i>元素使用FontAwesome字体系列。例如，它不能只是

    <i class="fa-pencil" title="Edit"></i>

    但

    <i class="fa fa-pencil" title="Edit"></i>

    如果CSS中包含以下内容，则将无法使用：

    * {
  font-family: 'Josefin Sans', sans-serif !important;   
}

  • 如果您使用的是IE8，是否正在使用HTML5 Shim？

  • 如果这不起作用，则在Font Awesome Wiki上还有更多的故障排除想法。

— mxro
source
3
我会补充：检查您的.htaccess是否没有阻止ttf，svg，eot或woff扩展
— BassMHL 2015年
字体覆盖！没有太多答案提到这一点。我检查了一下，检查了一下，最后弄清楚了。我过去也遇到过这个问题，不知道为什么，但是现在我知道了。
— adrianmc '16
1
我错过了首先添加单fa作为类名。谢谢。逐步找到问题的完美答案。
— Kai Noack
对我来说，设置字体系列是
— 另一回事
对我来说，我有“字体重量：500”（使其与我使用的主题保持一致）。我必须将其设置为“ font-weight：bold”
— bowlerae
24

起初，我无法使它与Font Awesome 5一起使用：

<i class="fa fa-sort-down"></i>

这就是为什么我不熟悉字体真棒的原因。因此，当我进一步查看时，我发现我的问题仅仅是版本问题。

在这种情况下，w3schools帮助了我。

Font Awesome 5的fas前缀是Font Awesome 5的新增功能fa。

中的s fas代表solid，某些图标也具有 常规模式，通过使用prefix指定far。

我已经注意到FontAwesome css文件夹中的不同文件，例如：

  • all.min.css
  • brand.min.css
  • fontawesome.min.css
  • 常规最小值
  • 固体最小css

那时我才意识到自己的错误。我要做的就是在HTML中包含适当的CSS：

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/regular.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/solid.min.css">

然后引用正确的项目：

<i class="fas fa-sort-down"></i>

此设置对我有用。尽管并非所有项目在每种类型中都有等效项。这将不起作用：

<i class="far fa-sort-down"></i>

附带说明一下，当您不想引用所有单独的文件时，就足够了：

<link rel="stylesheet" href="~/lib/Font-Awesome/css/fontawesome.min.css">
<link rel="stylesheet" href="~/lib/Font-Awesome/css/all.min.css">
— 范·埃尔伯格（Ruard van Elburg）
source
此外，备忘单还显示了每种图标类型可使用的项目。
— Ruard van Elburg
12

我的机器无法正常工作，因为我想要一个在使用的FA版本中未发布的图标。

这回答了为什么有些图标显示而其他图标没有显示的原因。

很明显，但我想有些人还是会喜欢这个。像我这样的。

— 泰瓜拉·安德拉德
source
4
是的，它确实提供了该问题的答案。
— Bobort
2
或者您正尝试使用所使用的版本中不再存在的旧字体。例如，此名称仅称为time-circle而不是times-circle-o，它是旧名称： fontawesome.com/v4.7.0/icon/times-circle-o
— smoore4 '18
1
谢谢！！这一直让我整天都
— 无法
5

您必须对maxcdn.bootstrapcdn.com使用https。maxcdn上只有https支持CORS

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="screen" />
— 查察旺·旺西里普拉塞特
source
4

我通过将Fonts目录与CSS文件置于同一级别来解决了这个问题。

— 洛洛
source
3

对于可能在2018年进行检查的人。我使用的字体真棒4.7.0，我只需将代码中的sin 取出即可解决此问题。这本来是。fas<i class="fa fa-[icon-name]"></i><i class="fas fa-[icon-name]"></i>

希望这可以帮助。

— 古德勒克·利奥
source
另外，我正在运行node.js服务器。
— 好运狮子座
fas前缀是Font Awesome 5的新增功能，Font Awesome 4使用fa。来自w3schools
— Ruard van Elburg
2

只需在fontawesome的更新中向上述答案添加更多信息，

如果您使用很棒的字体5

一个。只需将以下HTML复制并粘贴，

<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>

注意：最好<body> {YOUR_SCRIPT_HERE}</body>在（YOUR_CLOSING_BODY）之内和之前包含所有脚本。

b。例如

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>
— Sundar Gsv
source
如何在本地提供CSS，而不是链接到fa网站？
— Ghilteras
这是我的情况...我没有js文件，现在可以了！
— 克里斯蒂安·塞普尔维达
2

添加这个对我有用：

<link href="https://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet">

看一看

如此完整的示例是：

<link href="https://github.com/FortAwesome/Font-Awesome/blob/master/web-fonts-with-css/css/fontawesome.css" rel="stylesheet">
<a class="btn-cta-freequote" href="#">Compute <i class="fa fa-calculator"></i></a>
展开摘要

— 埃德加姆采
source
2

如果定义自定义CSS，则必须设置font-weight: 900;一些较新的Font Awesome库（从版本5开始）。不设置此字体粗细可能显示正方形。

— 朱里夫
source
2

笔记

当fontawesome的最新版本为v5。*，但yarn和npm版本指向v4。*（21.06.2019）时，将创建此答案。换句话说，通过软件包管理器安装的版本是最新版本的背后！

如果您是font-awesome通过软件包管理器（yarn或npm）安装的，请注意安装了哪个版本。或者，如果您已经安装font-awesome很久了，请检查已安装的版本。

安装font-awesome作为新的依赖项：

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ font-awesome@4.7.0
info All dependencies
└─ font-awesome@4.7.0
Done in 3.32s.

检查已经安装了哪个版本的font-awesome：

$ yarn list font-awesome
yarn list v1.16.0
warning Filtering by arguments is deprecated. Please use the pattern option instead.
└─ font-awesome@4.7.0
Done in 0.79s.

问题

安装font-awesome依赖项后，您可以将这两个源文件之一font-awesome.css或font-awesome.min.css（位于中node_modules/font-awesome/css/）合并到网页的标题中，例如

<head>
  <link type="text/css" rel="stylesheet" href="css/font-awesome.css">
</head>

接下来，您访问https://fontawesome.com/。您选择免费图标，然后搜索登录图标（例如）。您复制图标，例如<i class="fas fa-sign-in-alt"></i>，将其粘贴到html中，并且图标未显示，或者显示为正方形或矩形！

解

本质上，通过程序包管理器安装的版本落后于https://fontawesome.com/网站上显示的版本。如您所见，我们已经安装了，font-awesome v4.7.0但网站上显示的文档font-awesome v5.*。解决方案，访问记录了v4.7.0 https://fontawesome.com/v4.7.0图标的网站，复制相应的图标，例如<i class="fa fa-sign-in" aria-hidden="true"></i>并将其合并到您的html中。

— 卢卡斯·迪诺夫斯基（Lukasz Dynowski）
source
他们在这里发布了具有最新版本的新软件包。它也与less和sass \ o /兼容
— -DerpyNerd
2

对于版本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">

fontawesome.css文件不包含字体参考。

— 真爱
source
1

如果您使用的是Blogger托管，请使用以下网址样式表CSS：

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
— Nurdin BM。
source
1

尝试以下两个链接保留在标头标记中。

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

从以下链接获取图标：

<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/3.2.1/assets/font-awesome/css/font-awesome.css">
— 樱桃
source
1

我用：

<link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css">
<a class="icon fa-car" aria-hidden="true" style="color:white;" href="http://viettelquangbinh.com"></a>

之后的风格：

.icon::before {
display: inline-block;
margin-right: .5em;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
}
— 陈安贤
source
1

您发布的CDN链接我想是为什么它没有正确显示的原因，您可以在下面使用此链接，它对我来说效果很好。

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
展开摘要

— 约翰·克什·马古格
source
0

确保包含rel，并在awesomefont css文件的链接中输入“ rel =“ stylesheet” type ='text / css'“中的rel。没有这些文件，则无法为我正确加载文件。

— 艾略特·罗伯特
source
0

您可以将其添加到真棒字体目录中的.htaccess文件中

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/woff .woff
AddType font/woff .woff2
AddType font/otf .svg

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>
— 沃尔德·哈基姆（Waleed Hakim）
source
0

我已经测试过并且可以正常工作。

代替这个

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

与HTTPS一起使用

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
— 阿提夫·塔里克（Atif Tariq）
source
-1

您需要字体导入器。尝试

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>
— 暹罗网站
source
-2

我通过编辑主要的font-awesome.css文件来工作。它具有src的网址（woff，eot等...），我不得不将它们更改为绝对路径，例如：http ://mywebsite.com/font-awesome.woff 然后它起作用了！

— crystallove18
source
2
我不建议这样做，因为您正在编辑外部文件。您（或您的团队）每次需要更新fontawesome时都需要记住这一点。
— J Cordero
-6

更改此：

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

对此：

<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

我认为您需要http:否则不知道要使用哪种协议（file:例如，使用错误的协议）。

— 沙哈尔
source
@ user3870894其实是href，我在想JavaScript。但是尝试新代码。
— 沙哈尔2014年
@ user3870894 o_o然后发布完整的HTML或至少主要部分。控制台说什么？您是否尝试过检查元素？
— 沙哈尔2014年
2
@Shahar通过使用//浏览器选择请求站点正在使用的协议。当您的站点使用https时，它将选择https。如果您使用的是http，则它使用http从CDN请求文件。当然，如果file:///不建议使用本地打开站点，则浏览器确实会尝试使用file协议打开CDN 。
— 罗宾·范·巴伦
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.