如何在HTML中使用图标字体 - icon font?

主要特性

使用icon font来生成图标相对于基于图片的图标来说，有如下的好处：

• 自由的变化大小
  

• 自由的修改颜色
  

• 添加阴影效果
  

• IE6也可以支持
  

• 支持图片图标的其它属性，例如，透明度和旋转等等
  

• 可以添加text-stroke和background-clip:text等属性，只要浏览器支持
  
  

如何使用？
文字修饰：

1. <font color="Black">    <h3>
   

2.      <span aria-hidden=”true” data-icon=”⇝”></span>
   

3.      Stats
   

4.    </h3>
   

5.    [data-icon]:before {
   

6.      font-family: icons; /* BYO icon font, mapped smartly */
   

7.      content: attr(data-icon);
   

8.      speak: none; /* Not to be trusted, but hey. */
   

9.    }</font>

复制代码

单独图标：

1. <font color="Black">    <a href=”#”>
   

2.      <span aria-hidden=”true” data-icon=”▨”></span>
   

3.      <span>RSS</span>
   

4.    </a>
   

5.    /* Same CSS as above, plus */
   

6.    .icon-alone {
   

7.      display: inline-block; /* Chrome 19 was weird with clickability without this */
   

8.    }
   

9.    .screen-reader-text { /* Reusable, toolbox kind of class */
   

10.      position: absolute;
    

11.      top: -9999px;
    

12.      left: -9999px;
    

13.    }</font>

复制代码

创建你自己的icon font - IcoMoon

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

步骤1：选择他们提供的或者上传自己的

步骤2：下载下来

然后我们解压下看看文件

index.html就是样例，font里就是字体

好了这样你就可以使用图标字体了，可以根据自己的需要修改index文件。

本站演示效果：在线手册

来源：PHP小镇