Question

如何在HTML中使用图标字体

Answer 1

在html中使用图标字体的方法：

1、创建自己的iconfont，推荐使用iconmoon，使用它可以通过上传SVG或者字体来生成你需要的icon字体，本文在线演示使用iconmoon生成。

步骤1：选择页面提供的或者上传自己的

步骤2：指定字符映射

3、导入到页面使用css：

style.css写法如下：

 @font-face {
       font-family: 'icomoon';
       src:url('fonts/icomoon.eot');
       src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
           url('fonts/icomoon.woff') format('woff'),
           url('fonts/icomoon.ttf') format('truetype'),
           url('fonts/icomoon.svg#icomoon') format('svg');
       font-weight: normal;
       font-style: normal;
   }

Answer 2

<h3>
<span aria-hidden="true" data-icon="⇝"></span>
Stats
</h3>
[data-icon]:before {
font-family: icons; /* BYO icon font, mapped smartly */
content: attr(data-icon);
speak: none; /* Not to be trusted, but hey. */
}

单独图标：
<a href="#" class="icon-alone">
<span aria-hidden="true" data-icon="▨"></span>
<span class="screen-reader-text">RSS</span>
</a>
/* Same CSS as above, plus */

.icon-alone {
display: inline-block; /* Chrome 19 was weird with clickability without this */
}
.screen-reader-text { /* Reusable, toolbox kind of class */
position: absolute;
top: -9999px;
left: -9999px;
}