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之前附加＆amp; #x，例如图标代码是e001然后是data-icon =＆＃34;＆amp;＃xe001＆＃34;

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

1 个答案: