强大字体和 Unicode

我在我的网站上使用了(优秀的) Font-Awesome，如果我这样使用的话，它工作得很好:

<i class="icon-home"></i>

但是(出于某些原因)我想以 Unicode 的方式使用它，比如:

<i>&#xf015;</i>

(Font Awesome 的备忘录)

但它不工作-浏览器显示一个正方形代替。

我要怎么解决这个问题？ CSS 路径是正确的(作为使用 Font Awesome 的第一种方法)。

编辑: 我已经安装了 FontAwesome.otf。

197789 次浏览
小开

在阅读了 这一页上的 Davidhund的答案后，我想出了一个解决方案，你的网页字体没有正确加载，我是一个错误的路径问题。

他是这么说的:

我的第一个猜测是，您包含来自 不同的(子)域。因此，请确保您设置了正确的标题 这些 webfont-files: “您需要添加 访问控制-允许-起源头，白名单的域你是 把资产从 Https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#l78-86

再看看 字体-陷阱:)

希望我明白并帮助你:)

F135ta在同一页表示:

... 我通过上传文件“ fontawely-webfont. ttf”修复了这个问题 我的网络服务器和安装它像一个普通的字体. . 我不知道如果 无论如何，它是使用它的前提条件的一部分，但它对我来说很有用;-

小开
最佳答案

它不起作用，因为 <i>&#xf015;</i>只是要求浏览器使用斜体字显示私人使用代码点 U + F015。Font Awesome CSS 代码没有任何影响这一点的内容。如果你将 class=icon-home添加到标签中，你会得到 FontAwesome 字体中分配给 U + F 015的字形，但是你会得到两次，由于 Font Awesome 的欺骗性工作方式。

要获得一次字形，您需要使用要求使用 FontAwesome 字体的 CSS，而不需要触发通过生成的内容添加字形的规则。一个简单的技巧是使用一个以 icon-开头的类名，但是不匹配 Font Awesome 中的任何预定义名称或 CSS 或 JavaScript 代码中使用的任何其他名称。例如:

<i class=icon-foo>&#xf015;</i>

或者，使用设置 i元素上的 font-family: FontAwesome和 font-style: normal的 CSS 代码。

附言。注意，根据定义，诸如 U + F015这样的私人使用代码点没有可互操作的含义。因此，当样式表被禁用时，&#xf015;将不会显示为任何字符; 浏览器将使用它的方式通信未定义数据的存在，比如一个可能包含代码点号的小框。

小开

只要添加上 Jukka K.Korpela 答案上面，字体真棒已经定义了一个 CSS 选择器“ fa”。你可以简单地做 <i class="fa">&#xf015;</i>。这里需要注意的是，fa 定义了字体样式: Normal，如果需要斜体，可以像 <i class="fa" style="font-style:italic">&#xf015;</i>那样重写

小开

您必须使用 fa类:

<i class="fa">
&#xf000;
</i>


<i class="fa fa-2x">
&#xf000;
</i>
小开

对于那些可能偶然发现这篇文章的人，你需要设置

font-family: FontAwesome;

作为 CSS 选择器中的一个属性，然后 unicode 将在 CSS 中工作得很好

小开

您也可以使用 FontAwesome 图标和 CSS3伪选择器，如下所示。 enter image description here

确保将 font-family 设置为 FontAwesome，如下所示:

table.dataTable thead th.sorting:after {font-family: FontAwesome;}

为了使上述工作，你必须做到以下几点:

  1. 在这里下载 FontAwesome css 库 FontAwesome v4.7.0
  2. 从 zip 文件中解压缩并包含到您的应用程序根文件夹中，这两个文件夹如下所示: enter image description here
  3. 只引用您的应用程序的 <head></head>部分中的 css 文件夹，如下所示: enter image description here
小开

我发现这个管用

content: "\f2d7" !important;
font-family: FontAwesome !important;

没有那个对我来说很重要的东西，它似乎不起作用。

下面是一个关于如何使用 Unicode https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be更改社交图标的教程

小开

我发现在 Font-Awesome 版本5(免费)中，你可以添加: “ Font-family: Font Awesome 5 Free;”只有当它似乎是正常工作。

这对我很有效:)

我希望有人会觉得这有帮助

小开

我在使用 unicode 和 fontawest 时遇到了类似的问题。 当我写道:

font-family: 'Font Awesome\ 5 Free';
content: "\f061"; /* FontAwesome Unicode */

在谷歌 Chrome 浏览器上，出现的是一个正方形而不是图标。 新版本的 Font Awesome 也需要

font-weight: 900;

我同意。

发信人: https://github.com/FortAwesome/Font-Awesome/issues/11946

希望能帮上忙。

小开

一定要在你之前加载 FontAwesome 样式。

font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f007";

你可以在这里找到 FontAwesome 的解释: Https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

小开

请记住，您可能需要包含一个版本号，因为您可以使用:

font-family: 'Font Awesome 5 Pro';

或者

font-family: 'Font Awesome 5 Free';
小开

据我所知，你可以从三种不同的字体系列中选择，而且每种字体系列都有自己需要应用的权重元素:

首先

Font-family: ‘ Font Awesome 5 Brands’; 内容: “ f373”;

第二

Font-family: ‘ Font Awesome 5 Free’; 内容: 「 f061」 ; Font-weight: 900;

第三

font-family: 'Font Awesome 5 Pro';

参考此处 -https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements

希望这个能帮上忙。

小开

在最近的5.13有区别。 你总是..。

font-family: "Font Awesome 5 Free";
content: "\f107";

但是现在有一个区别... 而不是使用字体重量: 500;

font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f107";

为什么？我通过寻找内在来找到答案。Fas 类，所以您可以通过查看。所以你们要做的和它应该做的一样。找出是否存在字体权重和字体家族。给你们。这是5.13的最新答案。

小开

通过使用 css，您可以通过 Unicode 添加您的图标

content: '\f144';
font-family: FontAwesome;

会成功的

小开

对于那些使用 Font Awesome 4.7版本的用户,

css_selector::before{
content:"\f006";
font-family:"fontawesome";
font-weight:900;
}
小开

添加字体重量900. . 它为我工作

font-weight: 900;

提交答案