Html 字体真棒 & Unicode
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17254339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Font Awesome & Unicode
提问by matan129
I'm using (the excellent) Font-Awesome in my site, and it's working fine, if I use it this way:
我在我的网站中使用（优秀的）Font-Awesome，如果我这样使用它，它工作正常：
<i class="icon-home"></i>
But (for some reasons) I want to use it in the Unicode way, like:
但是（出于某些原因）我想以 Unicode 方式使用它，例如：
<i></i>
But it doesn't work - the browser shows a square instead.
但它不起作用 - 浏览器显示一个正方形。
How do I solve this? The CSS path is correct (as the first way of using Font Awesome works).
我该如何解决这个问题？CSS 路径是正确的（作为使用 Font Awesome 的第一种方法）。
Edit: I do have the FontAwesome.otf installed.
编辑：我确实安装了 FontAwesome.otf。
采纳答案by Jukka K. Korpela
It does not work, because <i></i>simply asks the browser to display the Private Use code point U+F015 using an italic typeface. The Font Awesome CSS code has nothing that would affect this. If you add class=icon-hometo the tag, you will get the glyph assigned to U+F015 in the FontAwesome font, but you will get it twice, due to the way the Font Awesome trickery works.
它不起作用，因为<i></i>只是要求浏览器使用斜体字体显示 Private Use 代码点 U+F015。Font Awesome CSS 代码对此没有任何影响。如果添加class=icon-home到标签中，您将在 FontAwesome 字体中获得分配给 U+F015 的字形，但由于 Font Awesome 诡计的工作方式，您将获得两次。
To get the glyph just once, you need to use CSS that asks for the use of the FontAwesome font without triggering the rules that add a glyph via generated content. A simple trick is to use a class name that starts with icon-but does not match any of the predefined names in Font Awesome or any name otherwise used in your CSS or JavaScript code. E.g.,
为了只获得一次字形，您需要使用 CSS 来要求使用 FontAwesome 字体，而不会触发通过生成的内容添加字形的规则。一个简单的技巧是使用icon-以 Font Awesome 中的任何预定义名称或 CSS 或 JavaScript 代码中以其他方式使用的任何名称开头但不匹配的类名称。例如，
<i class=icon-foo></i>
Alternatively, use CSS code that sets font-family: FontAwesomeand font-style: normalon the ielement.
或者，使用在元素上设置font-family: FontAwesome和 的CSS 代码。font-style: normali
PS. Note that Private Use code points such as U+F015 have, by definition, no interoperable meaning. Consequently, when style sheets are disabled, will not be displayed as any character; the browser will use its way of communicating the presence of undefined data, such as a small box, possibly containing the code point number.
附注。请注意，根据定义，U+F015 等专用代码点没有可互操作的含义。因此，当样式表被禁用时，将不会显示为任何字符；浏览器将使用它的方式来传达未定义数据的存在，例如一个可能包含代码点编号的小盒子。
回答by Basile
I got a simillary problem using unicode and fontawesome. when i wrote :
我在使用 unicode 和 fontawesome 时遇到了一个类似的问题。当我写道：
font-family: 'Font Awesome\ 5 Free';
content: "\f061"; /* FontAwesome Unicode */
On google chrome, a square appear instead of the icon. The new version of Font Awesome also requires
在谷歌浏览器上，会出现一个正方形而不是图标。新版 Font Awesome 也需要
font-weight: 900;
That's work for me.
这对我有用。
From : https://github.com/FortAwesome/Font-Awesome/issues/11946
来自：https: //github.com/FortAwesome/Font-Awesome/issues/11946
Hope that's will help.
希望这会有所帮助。
回答by Behrang Saeedzadeh
You must use the faclass:
您必须使用fa该类：
<i class="fa">

</i>
<i class="fa fa-2x">

</i>
回答by donnelj
For those who may stumble across this post, you need to set
对于那些可能偶然发现这篇文章的人，你需要设置
font-family: FontAwesome;
as a property in your CSS selector and then unicode will work fine in CSS
作为 CSS 选择器中的一个属性，然后 unicode 将在 CSS 中正常工作
回答by Bmuzammil
I have found that in Font-Awesome version 5 (free), you have you add: "font-family: Font Awesome\ 5 Free;" only then it seems to be working properly.
我发现在 Font-Awesome 版本 5（免费）中，您添加了：“ font-family: Font Awesome\ 5 Free;”，然后它似乎才能正常工作。
This has worked for me :)
这对我有用:)
I hope some finds this helpful
我希望有些人觉得这有帮助
回答by Web Limitless
I found that this worked
我发现这有效
content: "\f2d7" !important;
font-family: FontAwesome !important;
It didn't seem to work without the !important for me.
如果没有 !important 对我来说它似乎不起作用。
Here's a tutorial on how to change social icons with Unicodes https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be
这是有关如何使用 Unicode 更改社交图标的教程https://www.youtube.com/watch?v=-jgDs2agkE0&feature=youtu.be
回答by Yoann Carrer
Be sure to load the FontAwesome style before yours.
请务必先加载 FontAwesome 样式。
font-family: "Font Awesome 5 Free";
font-weight: 400;
content: "\f007";
You can find FontAwesome's explainations here: https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
你可以在这里找到 FontAwesome 的解释：https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
回答by omarjebari
Bear in mind that you may need to include a version number too as you could be using either:
请记住，您可能还需要包含版本号，因为您可以使用：
font-family: 'Font Awesome 5 Pro';
or
或者
font-family: 'Font Awesome 5 Free';
回答by Abhishek R
There are three different font families that I know of that you can choose from and each has its own weight element that needs to be applied:
我知道您可以选择三种不同的字体系列，每个系列都有自己需要应用的权重元素：
First
第一的
font-family: 'Font Awesome 5 Brands';
content: "\f373";
font-family: 'Font Awesome 5 Brands';
content: "\f373";
Second
第二
font-family: 'Font Awesome 5 Free';
content: "\f061";
font-weight: 900;
font-family: 'Font Awesome 5 Free';
content: "\f061";
font-weight: 900;
Third
第三
font-family: 'Font Awesome 5 Pro';
font-family: 'Font Awesome 5 Pro';
Reference here - https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
参考这里 - https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements
Hope this helps.
希望这可以帮助。
回答by Frederick Eze
You can also use the FontAwesome icon with the CSS3 pseudo selector as shown below.
您还可以将 FontAwesome 图标与 CSS3 伪选择器一起使用，如下所示。
Ensure to set the font-family to FontAwesome as shown below:
确保将 font-family 设置为 FontAwesome，如下所示：
table.dataTable thead th.sorting:after {font-family: FontAwesome;}
To get the above working, you must do the following:
要使上述工作正常进行，您必须执行以下操作：
- Download the FontAwesome css library here FontAwesome v4.7.0
- Extract from the zip file and include into your app root folder, the two folders as shown below:
- Reference only the css folder in the
<head></head>section of your app as shown below:
- 在此处下载 FontAwesome css 库FontAwesome v4.7.0
- 从 zip 文件中提取并包含到您的应用程序根文件夹中，两个文件夹如下所示：
- 仅引用
<head></head>应用程序部分中的 css 文件夹，如下所示：
