如何使用字体svg图标

问题描述

我有一个字体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与

如何匹配

解决方法

如果我没听错，您只想知道两个字符串如何相互关联？

在CSS中，您选择了所定义的字体，并希望使用svg字体打印一个Unicode字符（\ +数字），并使用十进制html实体定义了此字符，您也可以写unicode="" ，其中前面的x数字表示它是一个十六进制数字。

因此，e632只是十进制（基数10）数字58880的十六进制（基数16）表示。

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

font-face svg