Этот вопрос касается Icomoon в целом.
Не могу разобраться почему scss так компилит символы, но они работают, если в пути к шрифту указан не только шрифт, но и кэш шрифта.
Связанный вопрос: что это за кэш?
$icomoon-font-path: "fonts" !default;
$icon-bell: "\e900";
$icon-like: "\e901";
$icon-paceholder: "\e902";
$icon-search: "\e903";
$icon-star: "\e904";
$icon-vision: "\e905";
$icon-vision-off: "\e906";
$icon-angle-left: "\e907";
$icon-angle-right: "\e908";
$icon-arrow-right: "\e909";
$icon-angle-bottom: "\e90a";
$icon-chat-angle-bottom: "\e90b";
$icon-chat-angle-top: "\e90c";
@import "variables";
@font-face {
font-family: 'Icomoon';
src: url('#{$icomoon-font-path}/Icomoon.eot?r3waic');
src: url('#{$icomoon-font-path}/Icomoon.eot?r3waic#iefix') format('embedded-opentype'),
url('#{$icomoon-font-path}/Icomoon.ttf?r3waic') format('truetype'),
url('#{$icomoon-font-path}/Icomoon.woff?r3waic') format('woff'),
url('#{$icomoon-font-path}/Icomoon.svg?r3waic#Icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'Icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-bell {
&:before {
content: $icon-bell;
}
}
.icon-like {
&:before {
content: $icon-like;
}
}
.icon-paceholder {
&:before {
content: $icon-paceholder;
}
}
.icon-search {
&:before {
content: $icon-search;
}
}
.icon-star {
&:before {
content: $icon-star;
}
}
.icon-vision {
&:before {
content: $icon-vision;
}
}
.icon-vision-off {
&:before {
content: $icon-vision-off;
}
}
.icon-angle-left {
&:before {
content: $icon-angle-left;
}
}
.icon-angle-right {
&:before {
content: $icon-angle-right;
}
}
.icon-arrow-right {
&:before {
content: $icon-arrow-right;
}
}
.icon-angle-bottom {
&:before {
content: $icon-angle-bottom;
}
}
.icon-chat-angle-bottom {
&:before {
content: $icon-chat-angle-bottom;
}
}
.icon-chat-angle-top {
&:before {
content: $icon-chat-angle-top;
}
}
Ответ
Sass при компиляции utf-8 юникод файлов - переводит подобные вашим последовательности в юникод-символы. Почему вы видите квадраты вместо символов в редакторе? Потому что в вашем моноширинном шрифте эти символы не отрисованы. Но они отрисованы в шрифте Icomoon, который подключается на сайте, и там в итоге символы корректно отображаются.
Резюмируя: Это нормальное поведение, и по поводу скомпилированных символов беспокоиться не стоит.
Однако, если вдруг ваши файлы хранятся в ASCII-кодировке - Sass все равно будет компилировать символы в них, хотя по логике - не должен. На гитхабе уже 3 года висит открытый тикет по теме. Можно почитать, но разумный способ решения - перевести свои стили в utf-8-кодировку.
