如何使用unicode从ttf文件中使用图标

Posted 2021-05-04

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

任何人都可以告诉我如何实现这一目标？

答案

我得到了答案：添加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 =“＆＃xe001”