Question

我正在使用webfont图标。图标字形映射到Unicode的Supplementary Private Use Area-A＆amp; amp;乙

如果我通过data- *属性将字符传递给CSS，那么一切正常：

<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 ';
}

一切正常！

我在规范中找不到任何可能无法实现的内容......它似乎无法正常工作。

有人对此有任何见解吗？

Answer 1

访问Icomoon，将您的图标字体映射到私人使用区域。下载字体时，keyamoon提供了html，它有两种显示特殊字符的方法。

方法1（from CSS-tricks）并包含在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 from 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-tricks中的一条评论，斜体标签可能在语义上最好，因为它是在html5中重新定义的。我喜欢我的偶像。

如何在CSS生成的内容中嵌入Unicode Supplementary Private Use字符？

1 个答案: