css - 如何使用unicode使用ttf文件中的图标

Question

我目前正在使用 <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";
}

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

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

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

Answer 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 之前附加 &#x 例如图标代码是 e001 然后 data-icon=""