CSS 内容和图标字体 - 你在哪里找到内容值？答案

【问题标题】：CSS Content and Icon Fonts - Where do you find the content value?CSS 内容和图标字体 - 你在哪里找到内容值？
【发布时间】：2016-03-16 05:17:30
【问题描述】：

我在某些网页设计中使用了图标字体，但在弄清楚我的 CSS 中内容值的确切放置内容时遇到了一些麻烦。

我在已经完成的 css 中看到，对于某些图标，它采用以下内容：

.icon-facebook:before{
   content: '\ea8a';
}

这一切都很好，花花公子，但我想将该图标更改为其他图标，问题是，当我在 Mac 的 FontBook 应用程序上打开字体并将鼠标悬停在同一个图标上时，我得到以下数据：

Glyph 336
U + E94F

有谁知道如何查看 TTF 字体并获得可以插入 CSS 文件并让它们正确显示的正确值？

更新：在消除过程之后，CSS @font-face 正在调用链接的 .SVG 文件，而不是 TTF。 @font-face 目前看起来像这样：

@font-face {
  font-family: 'ifontello';
  src: url('files/fonts/fontello.eot?99886049');
  src: url('files/fonts/fontello.eot?99886049#iefix') format('embedded-opentype'),
       url('files/fonts/fontello.woff?99886049') format('woff'),
       url('files/fonts/fontello.ttf?99886049') format('truetype'),
       url('files/fonts/fontello.svg?99886049#fontello') format('svg');
  font-weight: normal;
  font-style: normal;
}

所以现在的问题是，我如何查看 SVG 以获取我将插入 CSS 文件的内容值，以便我可以从头开始创建样式表或更改内容值以显示不同的图标？

【问题讨论】：

你真的看的是同一个图标吗？也许它是重复的？或者 TTF 文件版本可能不同？因为 css 中的 \ea8a 与字符映射中的 U + EA8A 相同。
我正在寻找将用于不同图标的图标更改。问题是，我在 CSS 中有内容值，并非所有字符都被使用，只有六个。实际的@font-face 正在调用几个字体文件（.eot、.woff、.ttf 和 .svg），我无法确定我在 CSS 中输入的值以将显示的图标更改为我希望显示的图标.另外，我想知道如何交叉引用 css 和字体文件，以便将来自定义图标。

标签： html css fonts icons

【解决方案1】：

尤里卡！

如果您使用网络浏览器打开一个 .SVG，然后查看页面源，您将看到实现这一目标所需的所有数据。每个字符将被列为一个 GLYPH，每个 GLYPH 中都有一个称为 UNICODE 的属性。

如果您在 Web Developer 工具中查看它可能只是显示为一个框，但通过查看源代码，我能够看到该 unicode 的值。

对我来说，那个 facebook 图标的值是 unicode="&#xea8a;"，正如您所见，其中包含我正在寻找的 ea8a。通过使用该比较然后更改我的 CSS 以保存不同的 unicode 值，我可以将内容更改为我想要的内容。

【讨论】：

【解决方案2】：

我做了类似的事情：

1- 在您的 PC 上下载并保存字体。
2- 安装为字体。
3- 打开 Word！
4- 插入菜单 -> 符号
5- 更改符号页面中的字体
6- 选择您的符号（不要插入！）
7-窗口下方，字符代码是解决方案。（确保该代码是 UNICODE）

您可以将此代码（字符代码）用于 CSS Content att。

【讨论】：