日常项目中，尤其是手机站，难免会遇到从设计稿上面切出来的图片在手机上显示的时候图片很虚，不清楚，直接影响到了用户体验，那么今天给大家讲解一下，本人常用的用字体写图标的方法。

首先，我们先说一下字体写图标时需要用到的东西，总共为4部分。

1、字体软件：FontCreator.exe（字体软件可在FTP上新建一个font文件夹，以便于和其他文件区分。）

这个软件就是本人经常用到的字体写图标软件了，操作很简单，打开界面如下：

这是没有加载字体文字的界面。

然后将字体软件打开，在图标最末的空白处右键点击添加，这时候会出现一个如下图选中的图标一样，类似待添加的框。然后双击打开。将AI里复制好的图标，直接粘贴进来

图标添加好之后，在该软件的图标列表那里就会出现刚刚添加的新图标

那么，字体已经添加好了，要如何引用到html文件中呢。其实很简单。首先，在你需要引入图标的地方，写上一个标签，然后给该标签定义一个样式名称。

代码：

然后打开你所用的该项目的CSS文件，给icon-af添加一个样式，

代码： .icon-af:befor{content:”\F579”; font-size:20px; text-align:center;}

定义样式名称的时候需要注意这个:before，这个是在字体软件中默认的样式格式，用于跟其他样式做区分。其中第一个属性就是字体的属性了，注意“\F579”就是刚刚在字体软件中添加的映射的值。然后跟字体一样可以写颜色，大小，对齐方式等等属性。