2016-06-08 50 views
0

使用图标从TTF文件我目前使用<span class="icon-home2"></span>展现在我的CSS文件图标:如何使用Unicode

@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"; 
} 

任何人都可以告诉我怎么做到这一点?

+1

与您的问题无关,但与现代网页设计工作相关:停止使用所有已弃用,废弃和r edundant字体格式。使用WOFF,如果*有*支持IE8及以下版本,请使用'eot',然后保留。 WOFF的字节为字节相当于ttf/otf源字体,所以如果你已经有WOFF,添加ttf/otf是没有意义的,'eot'已经被弃用,但现在已经过时,因为MS *官方*不再支持IE8和下面,'svg'多年来还没有成为真正的字体格式。始终简化您的问题:从使用WOFF开始。 –

回答

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则数据图标=“&#xe001”