Блог

Главная - Вопросы по программированию - Как использовать значок svg шрифта

Как использовать значок svg шрифта

#css #svg #font-face

#css #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="amp;#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 {
      amp;:before {
        font-family: "System Icons";
        color: #ff934c;
        content: 'e632';
      }
 }

Мой вопрос, что такое e632? Внутри svg-файла есть unicode="amp;#58880;" . Как e632 соответствует amp;#58930;

Комментарии:

1. fileformat.info/info/unicode/char/e632/index.htm e632 — это шестнадцатеричное представление десятичного числа 58930, если это был ваш вопрос

Ответ №1:

Если я правильно вас понял, вы просто хотите знать, как две строки связаны друг с другом?

В вашем css вы выбираете определенный шрифт и хотите напечатать символ юникода ( number) в вашем шрифте svg. вы определили этот символ с помощью десятичной html-сущности, вы также можете написать unicode="amp;#xe632;" , где x перед числом указывает, что это шестнадцатеричное число.

Итак, e632 — это просто шестнадцатеричное (основание 16) представление десятичного (основание 10) числа 58880.

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