注释

Question

最近我一直在开发这个网站，我正在尝试在其中添加一个字体真棒图标，因此它可以扩展。

事情是他们没有出现。

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

Answer 1

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

<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中用src=替换href=来成为此内容？

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

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

Answer 2

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

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

非常明显，但我想有些人仍然会为此而堕落。跟我一样。

Answer 3

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

Answer 4

对于任何可能在2018年进行检查的人。我使用的字体真棒4.7.0，通过简单地将s中的fas删除即可解决此问题，如代码{{ 1}}。这最初是。

希望这会有所帮助。

Answer 5

添加这个对我有用：

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

Answer 6

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

Answer 7

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

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

Answer 8

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

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

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

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

Font Awesome 5的新名称是fas前缀，Font Awesome 4的前缀是fa。

fas中的s代表 solid ，并且某些图标还带有一个   常规模式，通过使用前缀far指定。

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

all.min.css
brands.min.css
fontawesome.min.css
regular.min.css
solid.min.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">

Answer 9

如果定义自定义CSS，则必须为一些较新的Font Awesome库（从版本5开始）设置post_max_size = 90M upload_max_filesize = 50M。不设置此字体粗细可能会显示正方形。

Answer 10

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

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

Answer 11

通过使用all.min.css文件，我可以使Font Awesome正常工作。

Answer 12

我遇到了类似的问题，按照此处指定的说明尝试用正方形显示图标：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">

Answer 13

使用此链接：

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

Answer 14

对于版本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文件不包含字体引用。

Answer 15

注释

当fontawesome的最新版本为 v5。* ，但是yarn和npm的版本指向 v4时，将创建此答案。 / strong>（2019年6月21日）。换句话说，通过软件包管理器安装的版本落后于最新版本！

如果通过软件包管理器（yarn或npm）安装了font-awesome，请注意安装了哪个版本。另外，如果很久以前已经安装了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/。您选择免费图标，然后搜索登录图标（例如）。您复制图标例如，将其粘贴到html中，并且不显示图标，或者显示为正方形或矩形！

解决方案

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

Answer 16

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

代替这个

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

Answer 17

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

如果您使用字体awesome 5，

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

<body> {YOUR_SCRIPT_HERE}</body>

注意：最好将所有脚本包含在<li><a href="https://stackoverflow.com/users/{USER}" class="social-icons"></a></li>之内和之前（YOUR_CLOSING_BODY）

湾例如，

 <ion-grid>
    <ion-row>
      <ion-col col-sm>
        <ion-card *ngFor="let results of themoviedbServicesProvider?.searchMovie?.results; let i = index" (click)="choiceGetMovie(results.id, language)">
          <ng-container *ngIf="themoviedbServicesProvider.baseUrlConfig + results.poster_path === 'http://image.tmdb.org/t/p/w300null'; then noJaquette else realJaquette"></ng-container>
            <ng-template #realJaquette><img name="{{i}}" [src]="themoviedbServicesProvider.baseUrlConfig + results.poster_path" /></ng-template>
            <ng-template #noJaquette><img name="{{i}}" src="../../assets/imgs/no-image.PNG" /></ng-template>
          <ion-card-content>
            <ion-card-title>
              {{ results.title }}
            </ion-card-title>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

Answer 18

我用：

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

Answer 19

您可以在.htaccess文件中将其添加到awesome font

目录中

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>

Answer 20

确保包含rel并输入＆＃34;的rel =＆＃34;样式表＆＃34;类型=＆＃39;文本/ CSS＆＃39;＆＃34;在awesomefont css文件的链接中。没有这些文件，我没有正确加载。

Answer 21

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

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

Answer 22

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

Answer 23

改变这个：

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

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

23 个答案:

注释

问题

解决方案