如何使用 unicode 使用 ttf 文件中的图标答案

【问题标题】：how to use icon from ttf file using unicode如何使用 unicode 使用 ttf 文件中的图标
【发布时间】：2018-03-06 14:23:21
【问题描述】：

我目前正在使用<span class="icon-home2"></span> 在我的 CSS 文件中显示图标：

@font-face {
font-family: 'icomoon';
src:    url('fonts/icomoon.eot?4r9x8o');
src:    url('fonts/icomoon.eot?4r9x8o#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?4r9x8o') format('truetype'),
    url('fonts/icomoon.woff?4r9x8o') format('woff'),
    url('fonts/icomoon.svg?4r9x8o#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;

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}



.icon-home:before {
content: "\e900";
}

现在我有一个不同的要求，我需要使用在此处映射的 unicode 显示带有 CSS 内容的图标：

.icon-home:before {
    content: "\e900";
}

谁能告诉我怎样才能做到这一点？

【问题讨论】：

与您的问题无关，但与现代网页设计工作有关：停止使用所有已弃用、废弃和冗余的字体格式。使用 WOFF，如果您有支持 IE8 及更低版本，请使用 eot，然后就这样吧。 WOFF 与 ttf/otf 源字体逐字节等效，因此如果您已经拥有 WOFF，则添加 ttf/otf 毫无意义，eot 已被弃用但现在已过时，因为 MS 正式不再支持 IE8 及以下版本，svg 多年来一直不是真正的字体格式。始终简化您的问题：从使用 WOFF 开始。

标签： css fonts icons truetype glyphicons

【解决方案1】：

我得到了答案：添加css文件

[data-icon]:before {
  font-family: icomoon; /* BYO icon font, mapped smartly */
  content: attr(data-icon);
  speak: none; /* Not to be trusted, but hey. */
}

并通过

访问

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

记得在图标的 unicode 之前附加，例如图标代码是 e001 然后是 data-icon=""

【讨论】：