Search code examples
csssvgfont-face

How to use font svg icon

I have a font svg icon file. It looks like this

<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="&#58930;" glyph-name="error" horiz-adv-x="1090" d="M1014.67 137.349c0 0 0 0 0 0l-310.651 310.651 ......"/>
    </font>
</defs>

I use this file as a font type

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

To display a icon, I have to write css rule such as

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

My question what is \e632 ? Inside svg file, there is unicode="&#58930;". How does \e632 match with &#58930;

Solution

  • If i understood you right, you just want to know, how the two strings are related to each other?

    In your css you select the defined font and want to print a unicode char (\ + number) in your svg font you defined this character using decimal html entity, you could also write unicode="&#xe632;" where the x in front of the number tells it that it is a hex number.

    So e632 is just a hexadecimal (base 16) representation of the decimal (base 10) number 58880.

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