Html FontAwesome 图标未显示。为什么？

Question

提问by Luis Valdez

Recently I've been developing this website and I'm trying to put a font awesome icons in it, so it's scalable.

最近我一直在开发这个网站，我试图在它里面放一个字体很棒的图标，所以它是可扩展的。

The thing is they are not showing up.

问题是他们没有出现。

Look at the HTML:

看一下 HTML：

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

or

或者

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

I did put the stylesheet reference in the head.

我确实将样式表引用放在了头部。

I don't know why they aren't showing up.

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

Here is the reference:

这是参考：

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

Alright, here is the full html:

好的，这是完整的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/[email protected]" 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>

Answer 1

采纳答案by NathanG

Under your reference, you have this:

在你的参考下，你有这个：

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

Specifically, the href=part.

具体来说，href=部分。

However, under your full html is this:

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

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

Have you tried replacing src=with href=in your full html to become this?

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

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

Works for me: http://codepen.io/TheNathanG/pen/xbyFg

对我有用：http: //codepen.io/TheNathanG/pen/xbyFg

Answer 2

回答by mxro

For seekers of missing font-awesome icons, I have collected a few ideas:

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

Assure you use a correct link to the CDN, such as:

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

If your page uses HTTPS, do you link to the font-awesome CSS using HTTPS (replace http://with https://in the link above).
Double check that you don't have AdBlock Plus or uBlock enabled. They might be blocking some of the icons.
Reset your browsers cache. (On Chrome do a looong click on the reload button and select Hard Cache Reset)
Assure that the or element you use, uses the FontAwesomefont family. For example, it must not just
```

```
but
```

```
It won't work if you have something as the following in your CSS:
```
* {
 font-family: 'Josefin Sans', sans-serif !important; 
}
```
If you are using IE8, are you using a HTML5 Shim?
If this doesn't work, there are further Troubleshooting Ideason the Font Awesome Wiki.

确保您使用正确的 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（更换链接到字体真棒CSShttp://用https://在上面的链接）。
仔细检查您没有启用 AdBlock Plus 或 uBlock。他们可能会阻止某些图标。
重置浏览器缓存。（在 Chrome 上点击重新加载按钮并选择硬缓存重置）
确保您使用的或元素使用FontAwesome字体系列。例如，它不能只是
```

```
但
```

```
如果您的 CSS 中有以下内容，它将不起作用：
```
* {
 font-family: 'Josefin Sans', sans-serif !important; 
}
```
如果您使用的是 IE8，您使用的是 HTML5 Shim 吗？
如果这不起作用，Font Awesome Wiki 上还有进一步的故障排除方法。

Answer 3

回答by Ruard van Elburg

At first I couldn't get this to work with Font Awesome 5:

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

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

That's why I came here, being unfamiliar with font awesome. So when I looked further I noticed that my issue was merely an issue with the version.

这就是我来到这里的原因，不熟悉字体真棒。因此，当我进一步查看时，我注意到我的问题仅仅是版本问题。

w3schoolshelped me out in this case.

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

New in Font Awesome 5 is the fasprefix, Font Awesome 4 uses fa.
The s in fasstands for solid, and some icons also have a regularmode, specified by using the prefix far.

Font Awesome 5 中的新增功能是fas前缀，Font Awesome 4 使用fa.
中的 sfas代表solid，一些图标也有常规模式，使用前缀指定far。

I already noticed the different files in the FontAwesome css folder, like:

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

all.min.css
brands.min.css
fontawesome.min.css
regular.min.css
solid.min.css

全部.min.css
品牌.min.css
fontawesome.min.css
正规的.min.css
实体.min.css

And that's when I realized my mistake. All I had to do was include the appropriate css to the html:

那时我才意识到我的错误。我所要做的就是在 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">

And then reference the correct item:

然后引用正确的项目：

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

This setup works for me. Though not all items have equivalents in each type. This will not work:

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

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

As a side note, when you don't want to reference all seperate files then this will suffice:

作为旁注，当您不想引用所有单独的文件时，这就足够了：

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

Answer 4

回答by Taiguara Andrade

Mine was not working because I wanted an icon which was not released in the FA version I was using.

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

This answers why some icons shows but others no.

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

Pretty obvious but I guess some people still fall for this. Like me.

很明显，但我想有些人仍然会为此而堕落。像我这样的。

Answer 5

回答by Chatchawan Wongsiriprasert

You must use https for maxcdn.bootstrapcdn.com. Only https on maxcdn support CORS

您必须为 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" />

Answer 6

回答by lolo

I solved this problem by putting the Fonts directory at the same level as my CSS files.

我通过将 Fonts 目录与我的 CSS 文件放在同一级别解决了这个问题。

Answer 7

回答by Goodluck Leo

To whoever may be checking this out in 2018. I am using font awesome 4.7.0 and I got this issue solved by simply taking out the sin fasas seen in the code . This was originally .

为了谁就可能在2018年被检查了这一点，我使用的字体真棒4.7.0，我得到了这个问题解决了，只需将取出s的fas在代码中看到。这原本是.

Hope this helps.

希望这可以帮助。

Answer 8

回答by Lukasz Dynowski

Notes

笔记

This answer is created when the latest version of fontawesomeis v5.*but yarnand npmversion points to v4.*(21.06.2019). In other words, versions installed via package managers is behind latest release !

这个答案是在最新版本的fontawesome是v5.*但yarn和npm版本指向v4.*(21.06.2019) 时创建的。换句话说，通过包管理器安装的版本落后于最新版本！

If you installed font-awesomevia package manager (yarnor npm) then, please be aware which version was installed. Alternatively, if you've already installed font-awesomelong time ago then, check what version was installed.

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

Installing font-awesome as new dependency:

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

$ yarn add font-awesome
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ [email protected]
info All dependencies
└─ [email protected]
Done in 3.32s.

Checking what version of font-awesome is already installed:

检查已安装的 font-awesome 版本：

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

Problem

问题

After you installed font-awesomedependency, you incorporate one of these two source files font-awesome.cssor font-awesome.min.css(founded in node_modules/font-awesome/css/) into headerof your webpage e.g.

安装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>

Next, you visit https://fontawesome.com/. You select free icons and you search for sign-inicon (as an example). You copy the icon e.g. , you paste it into your html and, icon is not shown, or is display as square or rectangle !

接下来，您访问https://fontawesome.com/。您选择免费图标并搜索登录图标（例如）。您复制图标，例如，将其粘贴到您的 html 中，并且图标未显示，或者显示为正方形或矩形！

Solution

解决方案

In essence, versions installed via package managers is behind version that is shown on https://fontawesome.com/website. As you can see we installed font-awesome v4.7.0but, website shows documentation for font-awesome v5.*. Solution, visit the website that documents icons for v4.7.0https://fontawesome.com/v4.7.0, copy appropriate icon e.g. and incorporate it into your html.

本质上，通过包管理器安装的版本落后于https://fontawesome.com/网站上显示的版本。如您所见，我们安装了font-awesome v4.7.0但是，网站显示了font-awesome v5.*. 解决方案，访问记录v4.7.0https://fontawesome.com/v4.7.0图标的网站，复制适当的图标，例如并将其合并到您的 html 中。

Answer 9

回答by live-love

For version 5:

对于版本 5：

If you downloaded the free package from this site:

如果您从该站点下载了免费软件包：

https://fontawesome.com/download

The fonts are in the all.cssand all.min.cssfile.

字体位于all.css和all.min.css文件中。

So your reference will look something like this:

因此，您的参考将如下所示：

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

The fontawesome.css file does not include the font reference.

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

Answer 10

回答by Sundar Gsv

Just adding some more info to the above answers in regards with update on fontawesome,

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

If you use font awesome 5,

如果你使用 font awesome 5，

a. just copy-to-paste the below HTML,

一种。只需复制粘贴以下 HTML，

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

Note:Better to include all your scripts within the <body> {YOUR_SCRIPT_HERE}</body>and just before (YOUR_CLOSING_BODY)

注意：最好<body> {YOUR_SCRIPT_HERE}</body>在 (YOUR_CLOSING_BODY) 之前和之前包含所有脚本

b. And for example,

湾例如，

<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"><i class="fab fa-stack-overflow"></i></a></li>

Html FontAwesome 图标未显示。为什么？

提问by Luis Valdez

采纳答案by NathanG

回答by mxro

回答by Ruard van Elburg

回答by Taiguara Andrade

回答by Chatchawan Wongsiriprasert

回答by lolo

回答by Goodluck Leo

回答by Lukasz Dynowski

Notes

笔记

Problem

问题

Solution

解决方案

回答by live-love

回答by Sundar Gsv

相关推荐

最近更新

标签

Html FontAwesome 图标未显示。为什么？

提问by Luis Valdez

采纳答案by NathanG

回答by mxro

回答by Ruard van Elburg

回答by Taiguara Andrade

回答by Chatchawan Wongsiriprasert

回答by lolo

回答by Goodluck Leo

回答by Lukasz Dynowski

Notes

笔记

Problem

问题

Solution

解决方案

回答by live-love

回答by Sundar Gsv

相关推荐

我可以将 HTML 页面的一部分导出为 SVG 图像吗？

Html bootstrap-switch 如何显示大标签文本

Html Drupal 覆盖自定义菜单模板

Html 在 JSX 和 React 中使用 onBlur

相关推荐

最近更新

标签