如何使用字体 svg 图标

Question

我有一个字体 svg 图标文件。看起来像这样

<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
    <font id="icomoon" horiz-adv-x="1024">
        <font-face units-per-em="1024" ascent="960" descent="-64"/>
        <missing-glyph horiz-adv-x="1024"/>
        <glyph unicode="&#58880;" glyph-name="error" horiz-adv-x="1090" d="M1014.67 137.349c0 0 0 0 0 0l-310.651 310.651 ......"/>
    </font>
</defs>

我用这个文件作为字体类型

@font-face {
  font-family: 'System Icons';
  url('path/to/font-icon.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

要显示图标，我必须编写 css 规则，例如

.icon-warning {
      &:before {
        font-family: "System Icons";
        color: #ff934c;
        content: '\e632';
      }
 }

我的问题是什么是 \e632 ？在 svg 文件中，有 unicode=""。 \e632 如何匹配 

Answer 1

如果我没理解错的话，你只是想知道，这两个字符串是如何相互关联的？

在你的 css 中，你 select 定义了字体，并想在你的 svg 字体中打印一个 unicode 字符（\ + 数字），你使用十进制 html 实体定义了这个字符，你也可以写 unicode="" ，其中数字前面的 x 告诉它它是一个十六进制数。

所以 e632 只是十进制（基数 10）数字 58880 的十六进制（基数 16）表示。

https://calculator.name/baseconvert/hexadecimal/decimal/e632

如何使用字体 svg 图标

How to use font svg icon

css

svg

font-face