Как встроить Unicode дополнительное частное использование символов в сгенерированный CSS контент? - PullRequest
Новая
       34

Как встроить Unicode дополнительное частное использование символов в сгенерированный CSS контент?

5 голосов
/ 28 марта 2012

Я использую веб-шрифт для иконок. Глифы значков сопоставляются с дополнительной частной областью использования Юникода-A & B.

Все работает нормально, если я передаю символы в CSS через атрибуты data- *: 

<div class="icon" data-icon="&#xF005A;"></div>

А потом: 

.icon::before {
    font-family: IconFont;
    content: attr(data-icon)
}

Но если я попытаюсь встроить экранированный символ непосредственно в CSS ... 

.icon::before {
    font-family: IconFont;
    content: '\0F005A ';
}

Он отображается как вопросительный знак в виде отсутствующего символа.

Но если я попробую другой специальный символ ... 

.icon::before {
    font-family: IconFont;
    content: '\F8FF ';
}

Работает отлично!

Я не могу найти в спецификации ничего, что говорит, что это невозможно ... Это просто не работает.

У кого-нибудь есть понимание этого?

1 Ответ

0 голосов
/ 09 апреля 2013

Посетите Icomoon, чтобы сопоставить ваш значок шрифта с частной областью использования. Когда вы загружаете шрифт, keyamoon предоставляет html, который имеет два метода для отображения специальных символов.

Способ 1 ( из CSS-трюков ) и включен в Icomoon для скачивания: 

<i aria-hidden="true" data-icon="&#xe000;"></i>

 ......

[data-icon]:before {
    font-family: 'icomoon';
    content: attr(data-icon);
    speak: none;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

Метод 2 от Icomoon : 

 <span aria-hidden="true" class="icon-pencil"></span>

 ......

.icon-pencil, .icon-folder {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.icon-pencil:before {
    content: "\e000";
}
.icon-folder:before {
    content: "\e001";
}

Вы действительно можете использовать любой тег для HTML; Я согласен с одним из комментариев в трюках CSS, что курсивный тег может быть лучше семантически, так как он был переопределен в html5. Мне просто нравится я за иконку.

...