FontAwesome图标没有显示 . 为什么？-Java 学习之路

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

事情是他们没有出现 .

看看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>

        <h1>The greatest way to contact those you love</h1>
        <h3>In a way you don't imagine</h3>

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

</body>

19 回答

0
您发布的CDN链接我想是为什么它没有正确显示，您可以使用下面这个，它对我来说非常适合 .
```
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
```
回复于 2024-05-09T23:53:37+08:00
0

对于那些可能在2018年检查这个问题的人 . 我使用的字体很棒4.7.0并且我通过简单地取出 fas 中的 s 解决了这个问题，如代码  所示 . 这最初是  .

希望这可以帮助 .

回复于 2024-05-09T23:53:37+08:00

如果您使用的是博主托管，请使用此网址样式表css：

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

回复于 2024-05-09T23:53:37+08:00

你需要一个字体导入器尝试

<style> 
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css););
</style>

回复于 2024-05-09T23:53:37+08:00

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

<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">

回复于 2024-05-09T23:53:37+08:00

根据你的参考，你有这个：

<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">

您是否尝试在完整的HTML中用 href= 替换 src= 来成为这个？

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

适合我：http://codepen.io/TheNathanG/pen/xbyFg

回复于 2024-05-09T23:53:37+08:00

-1

我通过将Fonts目录放在与我的CSS文件相同的级别来解决这个问题 .

回复于 2024-05-09T23:53:37+08:00
-1

确保在awesomefont css文件的链接中包含rel和type，如“rel =”stylesheet“type ='text / css'” . 没有这些文件没有正确加载我 .

回复于 2024-05-09T23:53:37+08:00
-5

我没有工作，因为我想要一个在我正在使用的FA版本中没有发布的图标 .

这就解释了为什么一些图标显示但其他人没有

很明显，但我想有些人仍然会这样做 . 像我这样的 .

回复于 2024-05-09T23:53:37+08:00
2

如果定义自定义CSS，则必须为某些较新的Font Awesome库（从版本5开始）设置 font-weight: 900; . 没有设置这个字体权重它可能显示正方形 .

回复于 2024-05-09T23:53:37+08:00

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

如果你使用字体awesome 5，

一个 . 只需复制粘贴下面的HTML，

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

Note: 最好将所有脚本包含在 <body> {YOUR_SCRIPT_HERE}</body> 之前和之前（YOUR_CLOSING_BODY）

湾例如，

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

回复于 2024-05-09T23:53:37+08:00

0

我可以使用all.min.css文件让Font Awesome工作 .

回复于 2024-05-09T23:53:37+08:00
0
对于缺少字体图标的求职者，我收集了一些想法：
- 确保使用正确的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上执行looong点击重新加载按钮并选择Hard Cache Reset）
- 确保您使用的  或  元素使用 FontAwesome 字体系列 . 例如，它不能只是
```

```
但
```

```
如果您在CSS中有以下内容，它将无法工作：
```
* {
 font-family: 'Josefin Sans', sans-serif !important; 
}
```
- 如果您使用的是IE8，您使用的是HTML5 Shim吗？
- 如果这不起作用，Font Awesome Wiki上还有Troubleshooting Ideas .
回复于 2024-05-09T23:53:37+08:00

您可以在.htaccess文件中将其添加到awesome字体目录中

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>

回复于 2024-05-09T23:53:37+08:00

添加这个对我有用：

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

take a look

完整的例子是：

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

回复于 2024-05-09T23:53:37+08:00

您必须使用https for maxcdn.bootstrapcdn.com . 只有maxcdn上的https才支持CORS

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

回复于 2024-05-09T23:53:37+08:00

改变这个：

<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: ） .

回复于 2024-05-09T23:53:37+08:00

我用：

<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);
}

回复于 2024-05-09T23:53:37+08:00

3

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

回复于 2024-05-09T23:53:37+08:00

FontAwesome图标没有显示 . 为什么？

19 回答

相关问题