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="&#x21dd;"></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="&#x25a8;"></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;
}

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

1. 选择他们提供的或者上传自己的

2. 
   

Answer 3

首先要写一个css，先定义一个自定义字体规则@font-face{font-family: "你自己定义的字体名称"; src="字体图标的矢量文件，一般后缀名为eot、ttf、woff、svg"}；
然后正式引用这个字体，一般在伪对象里面引用，例如 p::before{font-family:"你自定义的那条字体规则名称"; content:"某字体的Unicode编码，格式是\xxx"}，
你可以去bootstrap下载font-awesome，或者用ionic的字体图标也行，css都是写好的，可以直接引用，附font-awesome字体网址：http://www.bootcss.com/p/font-awesome/ 。

Answer 4

在HTML中使用图标字体：
图标字体化浅谈
参考：http://isux.tencent.com/icon-font.html