Geek Answers Handbook

How to embed Unicode extra personal characters in CSS content?

I use webfont for icons. Icon characters are mapped to an additional private use area of ​​Unicode-A and B.

Everything works fine if I pass characters in CSS using data- * attributes:

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

And then:

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

But if I try to embed the escaped character directly in CSS ...

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

It appears as a question mark for the absence of a character.

But if I try another special character ...

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

It works great!

I cannot find anything in the specification that says this is impossible ... It just doesn't work.

Can anyone figure this out?

+5
source share
1 answer

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. i.

0

More articles:


All Articles