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

问题描述 投票:0回答:1

我目前正在使用<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 fonts icons true-type-fonts glyphicons
1个回答
0
投票

我得到了答案:添加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”

© www.soinside.com 2019 - 2024. All rights reserved.