字体真棒和Unicode

Posted

技术标签:

【中文标题】字体真棒和Unicode【英文标题】：Font Awesome & Unicode 【发布时间】：2013-06-19 17:05:37 【问题描述】：

我在我的网站中使用（优秀的）Font-Awesome，如果我这样使用它，它工作正常：

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

但是（出于某些原因）我想以 Unicode 方式使用它，例如：

<i>&#xf015;</i>

(Font Awesome's cheatsheet)

但它不起作用 - 浏览器会显示一个正方形。

我该如何解决这个问题？ CSS 路径是正确的（作为使用 Font Awesome 的第一种方法）。

编辑：我确实安装了 FontAwesome.otf。

【问题讨论】：

请发一个 jsfiddle: jsfiddle.net 我现在无法访问所有文件，我只想知道如何使用带有 unicode 的网络字体。 尝试在您的页面上设置：&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;。 【参考方案1】：

我在使用 unicode 和 fontawesome 时遇到了一个类似的问题。 当我写的时候：

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

在 google chrome 上，会出现一个正方形而不是图标。 新版Font Awesome也需要

font-weight: 900;

这对我有用。

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

希望这会有所帮助。

【讨论】：

是的，现在需要字体粗细。谢谢。 这救了我。我错过了字体粗细。谢谢巴西尔！ Font Awesome 5 现在需要 font-weight:900 表示纯色 成功了！多谢！真的很奇怪，有些工作没有，有些需要重量.... 没有其他更改不适合我，因为我想将它用于placeholder。我已经厌倦了尝试不同的更改，只有 font-family: 'Font Awesome\ 5 Free' 和 font-weight: 600 更改真的有效！ +1 顺便说一句，如果你想在所有输入中使用，你应该用 !important 覆盖其他规则。【参考方案2】：

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

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

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

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

PS。请注意，根据定义，诸如 U+F015 之类的私有使用代码点没有可互操作的含义。因此，当样式表被禁用时，&amp;#xf015; 将不会显示为任何字符；浏览器将使用它的方式来传达未定义数据的存在，例如一个可能包含代码点编号的小盒子。

【讨论】：

PS+1。在我看来，像 FontAwesome 这样的符号字体的整个想法与 Unicode 和 Web 的预期设计格格不入，而且通常是有害的。 +1。使用 unicode 会影响性能吗？我觉得它可以，因为它不需要使用伪元素 :before 并定义内容。 使用 FontAwesome 5，我发现 font-family: FontAwesome; 不再有效。我不得不改用font-family: Font Awesome\ 5 Free;。 @TomWarner 的评论非常有帮助。这是设置font-family 的正确方法。注意 - 可能还需要将 font-weight 设置为非正常值。就我而言，我需要将其设置为粗体才能显示图标。 @aberkow 感谢您提供字体粗细提示。我可以确认它现在可以工作了。【参考方案3】：

您必须使用fa 类：

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

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

【讨论】：

【参考方案4】：

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

font-family: FontAwesome;

作为 CSS 选择器中的一个属性，然后 unicode 将在 CSS 中正常工作

【讨论】：

就我而言，我必须将其更改为 font-family: Font Awesome 5 Pro; 是的，这是针对 4.7 版本的。 这是我们都应该做的；）谢谢！【参考方案5】：

我发现在 Font-Awesome 版本 5（免费）中，您添加了： "font-family: Font Awesome\ 5 Free;" 只有这样它似乎才能正常工作。

这对我有用:)

我希望有人觉得这有帮助

【讨论】：

谢谢！我检查了 Font Awesome CSS，这似乎是答案，但有多种变体（取决于是否购买了专业许可证）。这为我解开了谜团。【参考方案6】：

据我所知，您可以选择三种不同的字体系列，每种字体都有自己的需要应用的权重元素：

第一

font-family: 'Font Awesome 5 Brands'; content: "\f373";

第二

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

第三

font-family: 'Font Awesome 5 Pro';

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

希望这会有所帮助。

【讨论】：

【参考方案7】：

请务必先加载 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

【讨论】：

【参考方案8】：

我发现这行得通

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

如果没有 !important 对我来说似乎不起作用。

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

【讨论】：

【参考方案9】：

请记住，您可能还需要包含版本号，因为您可能会使用以下任何一种：

font-family: 'Font Awesome 5 Pro';

或

font-family: 'Font Awesome 5 Free';

【讨论】：

【参考方案10】：

在最新的 5.13 中有所不同。 你总是像往常一样......

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

但是现在有区别了...而不是使用 font-weight: 500;你正在关注这个：

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

这是为什么呢？我通过在 .fas 类中查找来找出答案，因此您可以通过查看 .fas 类来找出更新的方法，这样您就可以做同样的事情。弄清楚是否有字体粗细和字体系列。来吧，伙计们。这是 5.13 的更新答案。

【讨论】：

【参考方案11】：

在this page 上阅读 davidhund 的答案后，我想出了一个解决方案，即您的网络字体未正确加载，我是路径错误的问题。

他是这样说的：

我的第一个猜测是您包含来自 不同的（子）域。因此，请确保您设置了正确的标题 那些 webfont 文件：“你需要添加 Access-Control-Allow-Origin 标头，将您所在的域列入白名单 从中提取资产。” https://github.com/h5bp/html5boilerplate.com/blob/master/src/.htaccess#L78-86

另外看看font-gotchas :)

希望我清楚并帮助你:)

在同一页，f135ta说：

...我通过上传文件“fontawesome-webfont.ttf”解决了这个问题 到我的网络服务器并像普通字体一样安装它..我不知道是否 无论如何，它是使用它的先决条件的一部分，但它对我有用；-

【讨论】：

不可能，因为我的网站仍然是本地的，只是一些 html。我什至不需要使用 WAMP/XAMPP 来检查它。并且字体安装在本地 那么路径呢？他们是正确的吗？ 仔细检查他们！ 它们一定是正确的，因为当我以这种方式使用字体时 '' 它可以工作 你的 .htaccess 呢？您也可以将其放在本地目录中，但您需要使用 WAMP 或 XAMPP 等本地服务器 我会检查一下，可能需要一些时间。感谢您的帮助！【参考方案12】：

您还可以将 FontAwesome 图标与 CSS3 伪选择器一起使用，如下所示。

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

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

要使上述工作正常进行，您必须执行以下操作：

    在此处下载 FontAwesome css 库FontAwesome v4.7.0 从 zip 文件中提取并包含到您的应用程序根文件夹中，两个文件夹如下所示： 仅引用应用程序&lt;head&gt;&lt;/head&gt; 部分中的 css 文件夹，如下所示：

【讨论】：

代码图片没有帮助。它们不能被复制/粘贴。【参考方案13】：

对于使用 Font Awesome 4.7 版的用户，

css_selector::before
content:"\f006";
font-family:"fontawesome";
font-weight:900;

【讨论】：

【参考方案14】：

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

【讨论】：

【参考方案15】：

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

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

这会起作用

【讨论】：

【参考方案16】：

添加字体粗细 900..它对我有用

font-weight: 900;

【讨论】：

以上是关于字体真棒和Unicode的主要内容，如果未能解决你的问题，请参考以下文章

将字体真棒和文本向左对齐

react-native-vector-icons字体真棒和轻型版本

setState 不更新字体真棒图标

字体真棒字体

“-o”在字体真棒类名中是啥意思？

字体真棒字体未加载？