字体真棒不工作，图标显示为正方形

所以我试图原型营销页面，我使用Bootstrap和新的字体Awesome文件。问题是，当我尝试使用图标时，所有在页面上呈现的都是一个大正方形。

以下是我如何将文件包含在头部:

<head>
<title>Page Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/app.css">
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
</head>

这是我尝试使用图标的一个例子:

<i class="icon-camera-retro"></i>

但所有这些都被渲染在一个大正方形中。有人知道这是怎么回事吗?

771784 次浏览
小开
最佳答案

根据文档(步骤3)，您需要修改提供的CSS文件，以指向站点上的字体位置。

小开

如果你正在使用LESS或SASS，打开字体-真棒。less/sass文件并编辑路径变量@fa-font-path: "../font";，它指向实际的字体:

@fa-font-path: "../font";


@font-face {
font-family: 'FontAwesome';
src: url('@{fa-font-path}/fontawesome-webfont.eot?v=3.0.1');
src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('@{fa-font-path}/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('@{fa-font-path}/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}

与CSS一样，除了你在@font-face声明块中编辑路径:

@font-face {
font-family: 'FontAwesome';
src: url('your/path/fontawesome-webfont.eot?v=3.0.1');
src: url('your/path/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
url('your/path/fontawesome-webfont.woff?v=3.0.1') format('woff'),
url('your/path/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
font-weight: normal;
font-style: normal;
}
小开

在新的3.0版本中，这应该简单得多。最简单的方法是指向引导CDN: http://www.bootstrapcdn.com/?v=01042013155511#tab_fontawesome

小开

如果你正在使用Maven和Apache Wicket，也要检查以下内容，以尝试解决字体很棒和图标未加载的问题:

例如，如果您已将文件放在以下文件结构中

/src
/main
/java
/your
/package
/css
font-awesome.css
/font
fontawesome-webfont.eot
fontawesome-webfont.svg
fontawesome-webfont.svgz
fontawesome-webfont.ttf
fontawesome-webfont.woff

1)检查你是否正确地使用包资源保护，以允许正确加载字体文件?

从你的类扩展WebApplication的例子:

@Override
public void init() {
super.init();
get().getResourceSettings().setPackageResourceGuard(new PackageResourceGuard());


}

2)检查在你确保所有字体都正确地传输到Web浏览器后，检查什么已经实际传输到Web浏览器，即，字体文件的完整性改变了吗?比较源目录中的文件和传输到Web浏览器的文件，例如，使用Firefox和DiffDog的Web开发工具栏(用于文件比较)。

特别是如果您正在使用Maven，请注意资源过滤。不要过滤包含/font文件的文件夹-否则它们将被损坏。

来自pom.xml的示例

<build>
<finalName>Your project</finalName>
<resources>
<resource>
<filtering>true</filtering>
<directory>src/main/resources</directory>
</resource>
<resource>
<filtering>false</filtering>
<directory>src/main/java</directory>
<includes>
<include>**</include>
</includes>
<excludes>
<exclude>**/*.java</exclude>
</excludes>
</resource>
</resources>
</build>

在上面的例子中，我们没有过滤src/main/java文件夹，其中包含css和字体文件。

有关二进制数据过滤的更多信息，请参阅文档:

http://maven.apache.org/plugins/maven-resources-plugin/examples/filter.html

特别是文档警告:“警告:不过滤文件 像图像一样的二进制内容!这很可能导致输出损坏。 如果您同时拥有文本文件和二进制文件作为资源，则需要 声明两个互斥的资源集。第一个资源集 属性定义要筛选的文件，其他资源集定义 文件复制不变…" < / p >

小开
如果您的服务器是IIS，请确保添加正确的MIME以提供.woff文件扩展名。 正确的MIME是application/octet-stream

小开

我已经从3.2.1更改为4.0.1，文件夹为font，现在称为fonts。

src: url('../font/fontawesome-webfont.eot?v=3.2.1');


src: url('../fonts/fontawesome-webfont.eot?v=4.0.1');
小开

你必须有2个类，fa类和标识所需图标fa-twitter， fa-search等的类…

<!-- Wrong -->
<i class="fa-search"></i>


<!-- Correct -->
<i class="fa fa-search"></i>

引导5更新

注意:" fa前缀在版本5中已弃用。新的默认是fas固态样式和fab样式的品牌。——联合国日向

小开

我今天找到了一个解决方案:

  1. 从他们的Github 页面下载整个项目
  2. 然后按照默认CSS部分中页面的其余步骤将目录移动到项目中，并在.html文件的HEAD部分中添加链接

他们的文档的问题是，他们没有指定一个链接，您应该在哪里获得整个字体的副本，并将其放入您的项目中。

小开

使用绝对路径代替相对路径解决了这个问题。我使用的是相对路径(见下面的第一个例子)，但这行不通。我通过控制台检查，发现服务器返回404，文件没有找到。

相对路径导致404:

@font-face {
font-family: "FontAwesome";
src: url("../fonts/fontawesome-webfont.eot?v=4.0.3");
}

绝对路径解决它跨浏览器:

@font-face {
font-family: "FontAwesome";
src: url("http://www.mysite.com/fonts/fontawesome-webfont.eot?v=4.0.3");
}

除非迫不得已，否则我不建议你这么做，但这对我来说很管用。当然，您应该对font-awesome.css文件中的所有字体格式重复此操作。

小开

图标上的检查以确保您没有无意中更改字体族。如果你改变了。fa项目的字体族从:FontAwesome图标将不会显示。总是一些愚蠢的小事情。

小开

我使用官方字体Awesome SASS红宝石宝石并通过将下面的行添加到我的application.css.scss来修复错误

@import "font-awesome-sprockets";

解释:

font-awesome-sprockets文件包括sprockets资产助手Sass函数，用于查找字体文件的正确路径。

小开

使用这个

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

我有类似的问题与亚马逊Cloudfront CDN，但它得到了解决后，我开始加载它从maxcdn

小开
我试着用以前的几个方法来解决同样的问题，但它们在我的情况下不起作用。 最后，我在HEAD中添加了这2行，它工作了:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css">
小开

我有这个问题。问题是我有一个字体家族的CSS样式!重要覆盖fontawesome字体。

小开

我使用Font Awesome 4.3.0只是从maxcdn的作品链接，如前所述在这里，

但是在服务器中托管将字体和CSS放在同一个文件夹中对我来说是有效的，就像这样

enter image description here

然后只需链接CSS:

<link href="~/fonts/font-awesome.min.css" rel="stylesheet" />
小开

你必须为你的字体文件返回头Access-Control-Allow-Origin到＊

小开

如果你使用sass，并已导入你的main.scss @ import“. . /供应商/ font-awesome / scss / font-awesome.scss”; < /代码> < / p >

错误可能来自字体-awesome。查找相对路径中的字体文件的SCSS文件。

因此还记得覆盖$fa-font-path变量: $fa-font-path: "https://netdna.bootstrapcdn.com/font-awesome/4.3.0/fonts" ! < /代码> < / p >

这样就不需要在index.html中添加CDN

小开

它不适合我，因为我有Allow from none指令的根目录在我的apache配置。下面是我如何让它工作的……

我的目录结构:

root/
root/font-awesome/4.4.0/css/font-awesome.min.css
root/font-awesome/4.4.0/fonts/fontawesome-webfont.*
root/dir1/index.html

我的index.html有:

<link rel="stylesheet" href="../font-awesome/4.4.0/css/font-awesome.min.css">

我选择继续禁止访问我的根目录，而是在我的apache配置中为root/font-awesome/添加了另一个目录条目

<Directory "/path/root/font-awesome/">
Allow from all
</Directory>
小开
打开你的font-awesome.css 这里有如下代码:

@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.5.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.5.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.5.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.5.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.5.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.5.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}

你必须有这样的文件夹:

font awesome -> css
-> fonts

或者最简单的方法:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
小开

我的问题在于

<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">

在一个

<!-- build:css assets/styles/main.css -->
<!-- endbuild -->

标签

我把它放在标签的外面。

小开

这可能是你的字体路径不正确，使css无法加载字体和呈现图标，所以你需要提供附加字体的搁浅路径。

@font-face {
font-family: "FontAwesome";
src: url("fonts/fontawesome-webfont.eot");
}
小开

使用这个<i class="fa fa-camera-retro" ></i>你没有定义fa类

小开

为我(在我的Windows 7机器上)解决问题的是解密我的项目目录。在测试你的网站时，会有很多视觉和功能上的小故障。只需进入命令提示符并运行:

attrib -R %PROJECT_PATH%\*.* /S
cipher /a /d /s:%PROJECT_PATH%

.．.其中%PROJECT_PATH%是存放代码的目录的完整路径名。

小开

仔细检查fontawessome -all.css文件-在最底部会有一个webfonts文件夹的路径。我的……“/webfonts”格式，这意味着CSS文件将从它所在的位置往上看一级。由于我所有的css文件都在css文件夹中，我将字体添加到同一个文件夹中，这是行不通的。

只要把你的字体文件夹向上移动一个级别，一切都应该很好:)

用字体Awesome 5.0测试

小开

现在在fontawesome 5中，你可以通过Https传输一个缓存版本的JS。

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

关于https://fontawesome.com/get-started/svg-with-js的更多信息

小开

你必须有两个类，fas类和fa-*类。请参阅文档中的基本的使用:

fa前缀在版本5中已弃用。新的默认值是fas实体样式和fab品牌样式。

// Correct (version >= 5)
<i class="fas fa-search"></i>


// Wrong (version < 5)
<i class="fa fa-search"></i>
小开

与上层阶级一起使用

<div class="container">
<i class="fa fa-facebook"></i>
</div>
小开

我遇到了这个问题，仔细地走了每一步……尽管我已经使用FA很多年了……然后我意识到我的邮件css文件中有这一行:

* {
font-family: Arial !important;
}

愚蠢的错误，但这可能会在将来提示某人!

小开

我尝试了上面的一些建议，但都没有成功。

我使用NuGeT包。 (出于某种原因)多个命名版本(字体-很棒，fontawesome，字体。太棒了,等等。)

值得的是: 我删除了所有已安装的版本，然后只安装了font.awesome的最新版本。font.awesome只是工作，不需要调整或配置任何东西

我认为在其他已命名的版本中有许多东西是缺失的。

小开

截至2018年12月，我发现使用托管在bootstrapcdn上的稳定版本4.7.0而不是font-awesome 5. x。在他们的网站上更容易——因为每次他们升级小版本时，以前的版本都会崩溃。

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

图标是一样的:

<i class="fa fa-facebook"></i>
小开

这么多答案，所以我添加了我的工作为我(更改名称，如果你不使用PRO): 在_typography.less < / p > 

//
//  Common
//  _____________________________________________


& when (@media-common = true) {
.lib-font-face(
@family-name: @font-family-name__fontawsomeregular,
@font-path: '@{baseDir}fonts/webfonts/fa-regular-400',
@font-weight: 400,
@font-style: normal
);
.lib-font-face(
@family-name: @font-family-name__fontawsomelight,
@font-path: '@{baseDir}fonts/webfonts/fa-light-300',
@font-weight: 300,
@font-style: normal
);
.lib-font-face(
@family-name: @font-family-name__fontawsomebrands,
@font-path: '@{baseDir}fonts/webfonts/fa-brands-400',
@font-weight: normal,
@font-style: normal
);
.lib-font-face(
@family-name: @font-family-name__fontawsomesolid,
@font-path: '@{baseDir}fonts/webfonts/fa-solid-900',
@font-weight: 900,
@font-style: normal
);
}

在_theme.less

@import '../includes/fontawesome/fontawesome.less';
@fa-font-path: '@{baseDir}fonts/webfonts';


//  Fonts
@font-family-name__fontawsomeregular: 'Font Awesome 5 Pro';
@font-family-name__fontawsomelight: 'Font Awesome 5 Pro';
@font-family-name__fontawsomebrands: 'Font Awesome 5 Brands';
@font-family-name__fontawsomesolid: 'Font Awesome 5 Pro';

用法示例:

 .my-newclass:before{
content: '\f002';
display: inline-block;
float: left;
font-family:  @font-family-name__fontawsomelight;
font-size: 16px;
}
小开

请添加

@import 'https://****.net/*********/font-awesome.min.css';
@font-face {
font-family: 'FontAwesome';
src: url('https://****.net/*********/FontAwesome.otf');
src: url('https://****.net/*********/FontAwesome.otf?#iefix')
}

这到你的css顶部，下载并正确链接css和字体，问题是由于FontAwesome没有正确加载。

谢谢

小开

font-weight: 900;

我有一个不同的问题与字体Awesome 5。 对于fontaweesome图标，默认的字体重量应该是900，但对于span和I标签，我将其重写为400。 它只是工作，当我纠正它

这是他们的Github页面的问题参考，https://github.com/FortAwesome/Font-Awesome/issues/11946

小开

如果你通过包管理器(纱或npm)安装了font-awesome，那么请注意安装的是哪个版本。或者，如果你很久以前已经安装了font-awesome，检查安装的版本。

本质上，通过包管理器安装的版本可能落后于https://fontawesome.com/网站上显示的版本。因此，就像今天(2019年6月21日)包管理器将安装v4.7.0作为最新版本，但网站将指向指向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和all.min.css文件中。

这是现在使用最新版本(替换为您的文件夹)的参考文件的样子:

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

在苦苦寻找解决方案，但发现官方文档没有帮助之后，这为我解决了问题:

  1. 下载fontawessome .zip。我使用版本5.10.2，我从这里得到https://fontawesome.com/download

  2. zip文件中有几个文件夹。你只需要css和webfonts文件夹 enter image description here < / p >

      在你的web项目中创建2个文件夹，命名为css和webfonts。 李enter image description here < / > 李< / ol > < / >

    这些名字是必须的。现在从压缩文件中复制css和webfonts的内容到项目中的相应文件夹中。这就是全部!

    当心fontawesome !卓越就是让事情变得简单!

小开

我有同样的问题与字体awesome 5下载纱， 我在all.js文件中添加了min.css文件沿着

希望这能帮助到某人

<link  rel="stylesheet"   href="node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css">
<script src="node_modules/@fortawesome/fontawesome-free/js/all.js" charset="utf-8"></script>
小开

如果您使用的是版本5。*或更大，则必须使用

< p > all.css 或 all.min.css < / p >

包括fontawessome .css不能工作，因为它没有引用webfonts文件夹，也没有引用@font-face或font-family

你可以通过在fontawessome .css或fontawessome .min.css中搜索font-family属性来检查这一点

小开

如果MIME TYPE已经具有.woff和.woff2文件类型，并且仍然给出HTTP-404错误，请检查请求过滤。如果这是限制性的，添加这些文件类型这些允许服务，它将工作。点击这里查看详情！

小开

/css/all.css文件包含核心样式和所有图标样式，当你使用字体Awesome时需要。/webfonts文件夹包含了上面CSS引用和依赖的所有字体文件。

复制整个/webfonts文件夹和/css/all.css到你的项目的静态资产目录(或任何你喜欢保留前端资产或供应商的东西)。

将复制的/css/all.css文件的引用添加到你想要使用字体Awesome的每个模板或页面。

只是访问- https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

小开

必须这样工作

    确保你有fontawesome CDN链接在你的页面顶部 李fontawesome cdn < br > < / >
  1. 确保.fa类没有被赋予另一个font-family属性。当我们给页面中的所有标记一个样式时，通常会发生这种情况。像这样

* {
font-family: Arial;
}

而是使用这个

*:not(.fa){
font-family: Arial;
}

  1. 确保你输入的是fontawesome网站上给出的确切的类名。复制粘贴以确保。

如果你使用Cloudflare CDN，你可以使用下面的链接标签在你的页面中使用字体awesome 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
<i class="fa fa-home"></i>

小开

在(免费的)Font Awesome 5版本中，有一个小细节对我来说很难理解，我没有注意到它:

Style   Availability    Style Prefix    Example Rendering
Solid   Free            fas             <i class="fas fa-camera"></i>
Brands  Free            fab             <i class="fab fa-font-awesome"></i>

(从文档提取)

有了这个引用，品牌图标，如fa-twitter或fa-react需要与类fab一起使用，而所有其他的(免费)图标需要与类fas一起使用。这很容易监管。

小开

经过5个多小时的挣扎，我找到了问题的原因。

  1. 使用FontAwesome 5，你应该使用fa<年代trong>年代(注意" "最后):

<i class="fas fa-camera"></i>

  1. I was using "regular" font, which apparently is paid in this version - I switched to "solid" and it all started working fine.
小开

在我的例子中，我只是复制

<i class="fa-solid fa-tags"></i> //provided by font awesome

对于现有的前端模板，包括一些其他图标从字体真棒，但这没有工作，所以通过添加'fas'类，它工作;

<i class="fas fa-solid fa-tags"></i> //working

提交答案