Что означает \ e901 для тега содержимого CSS?

Question

В нашем файле CSS я вижу это:

[class*="iconsmall-"]:before {
  font-family: 'icons';
  font-style: normal;
  font-size: 18px;
  padding-left: 5px;
  speak: none;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
          font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
} 

.iconsmall-unknown:before {content: '\e901';}

У нас есть неизвестный файл .svg.Что означает \ e901 и как он узнает, что на него есть файл unknown.svg, на который ссылаются?

Здесь будет похожая ситуация с этим пером:

https://codepen.io/bungeedesign/pen/XqeLQg с\ f003 ссылается.

Answer 1

\ указывает на следующую ссылку на символ Unicode. Состоит из четырех шестнадцатеричных цифр.

Код символа e901 является частью блока, зарезервированного для частного использования. И, вероятно, присваивается конкретному глифу в используемом там шрифте. Я предполагаю, что это значок шрифта.

f003 - то же самое. Этот CodePen использует шрифт FontAwesome, и мы можем видеть из документов FA, что он соответствует (как и ожидалось) значку конверта .

Answer 2

Свойство CSS content можно использовать для отображения текста, изображений и кода SVG. \ - это способ «экранировать» специальные символы и показывать определенные символы шрифта. За \ всегда следует юникод. В вашем примере это e901 Использование:

.hello::before { content: "world" } // shows world
.hello::before { content: url('/assets/icons/icon.svg') } // shows a SVG image
.hello::before { content: "\u2663"} // shows ♣ (instead of "\u2663")

Дополнительные примеры: https://css -tricks.com / snippets / html / glyphs /

Веселись!