字体超赞图标不工作,我已经包括所有必需的文件

我试图在我的网站上使用 4.1.0版本的字体超赞图标,但是它们不起作用,我已经在我的网页的 head中引用了它们。

我试过两种方法。

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

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

下面是我正在使用的 CDN 链接: <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>
794518 次浏览

改变这一点:

<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:,结果)。

在你的参考下,你有这个:

<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

你必须使用 https 进行 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" />

对于那些寻找丢失字体的酷炫图标的人,我收集了一些想法:

  • 请确保您使用正确的链接到 CDN,例如:

    <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 <span> or <i> element you use, uses the FontAwesome font family. For example, it must not just

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

    但是

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

    如果你的 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 Ideas on the Font Awesome Wiki.

如果你正在使用 blogger 主机,使用这个 url 样式表 css:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.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">

从下面的链接获取图标:

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

加上这个对我很有用:

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

确保在 Awesomefont CSS 文件的链接中包含 rel 和 type,如 rel="stylesheet" type='text/css'中所示。 没有这些文件就无法正确加载。

你可以把它添加到.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>

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

我用:

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

你需要一个字体导入器。 | 试试

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

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

这就解释了为什么有些图标会显示出来,而有些却没有。

很明显,但我想有些人还是会上当的,比如我。

只是添加一些更多的信息,以上的答案关于更新的方太棒了,

如果你用了超赞的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)

举个例子,

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

我通过编辑主要字体来完成我的工作-太棒了。Css 档案。它具有到 src (woff,eot,等等)的 url。.)我不得不将它们更改为绝对路径,例如: < a href = “ http://mywebsite.com/font-awesome.woff”rel = “ nofollow norefrer”> http://mywebsite.com/font-awesome.woff 那就成功了!

如果你定义自定义的 CSS,你必须为一些新的字体超赞库(从版本5)设置 font-weight: 900;。不设置这个字体重量可能会显示方块。

你发布的 CDN 链接,我想这就是为什么它没有正确显示,你可以使用下面这个,它完全适合我。

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

给2018年可能要查这个的人。我正在使用字体令人敬畏的4.7.0,我得到了这个问题的解决,只需取出 fas中的 s,如代码 <i class="fa fa-[icon-name]"></i>所示。这本来是 <i class="fas fa-[icon-name]"></i>

希望这个能帮上忙。

我已经测试过了,它起作用了。

而不是这样

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

笔记

这个答案是在 太棒了的最新版本是 V5. * ,而 纱线Npm版本指向 V4. * 时创建的(21.06.2019)。换句话说,通过软件包管理器安装的版本是最新版本的背后!

如果您通过软件包管理器(纱线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.cssfont-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。

版本5:

如果你从这个网站下载了免费软件包:

Https://fontawesome.com/download

字体在 All.css全部都是 min.css文件中。

所以你的推荐信应该是这样的:

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

Css 文件不包括字体引用。

使用以下连结:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/brands.min.css" integrity="sha512-AMDXrE+qaoUHsd0DXQJr5dL4m5xmpkGLxXZQik2TvR2VCVKT/XRPQ4e/LTnwl84mCv+eFm92UG6ErWDtGM/Q5Q==" crossorigin="anonymous" />

我遇到了类似的问题,在正方形中显示图标,按照这里指定的指令尝试: https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

通过在 html 页面的头部使用这个引用解决

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

如果您使用的是较新版本的 Angular,只是安装包 npm/纱线是不够的。您还需要在 风格中导入 css 文件(使用 @import "~bootstrap-icons/font/bootstrap-icons.css";)。