iconfont添加新图标_添加自定义图标(iconfont)

## 自定义icons的设置

1. 介绍: 现在基于css font-face的字体图标越来越流行。 这种图标具有矢量图的特点，可以不失真的自由缩放，还可以通过css来设置图标的颜色，还有就是网络上资源特别丰富。X5系统自带了数百个字体图标， 用户还可以通过配置使用自己下载的字体图标， 下边就介绍一下具体的使用方法。

2. 首先以fortawesome 网站为例(网址：[http://fortawesome.github.io/Font-Awesome](http://fortawesome.github.io/Font-Awesome "http://fortawesome.github.io/Font-Awesome")/)

[](http://wex5.com/cn/wp-content/uploads/2015/05/fa1.jpg)

1. 打开fortawesome首页， 下载资源，解压缩到X5系统目录 model/UI2/(your dir)下， 解压后目录结构是这样的：

[](https://box.kancloud.cn/2015-09-23_56018ec112c9d.jpg)

2. 然后修改font-awesome.css文件名为fa.icons.css， 如果你希望使用压缩的文件， 就把font-awesome.min.css 文件名改为fa.icons.css。[](https://box.kancloud.cn/2015-09-23_56018ec16365e.jpg)

3. 然后在功能中window组件上右键，增加css资源，在选择器中选择fa.icons.css文件，完成后在组件树上会增加resource/require节点。如下图。[](https://box.kancloud.cn/2015-09-23_56018ec1be88b.jpg)[](https://box.kancloud.cn/2015-09-23_56018ec7223fc.jpg)

4. 现在icons资源已经引入好了，可以在组件中使用字体图标了， 比如打开button的icon属性选择器， 在下拉列表中就会多一个fa选项，切换到这一条就可以选择fortawesome的字体图标了。[](http://wex5.com/cn/wp-content/uploads/2015/05/iconSelector.jpg)

5. 在功能运行的时候，X5系统会自动加载fa.icons.css

3. 问题解答：

1. 为什么需要修改css文件名，以及修改的规则？ X5系统需要分析css文件中包含哪些字体的class， 需要知道icon class 的前缀，然后才能把它们找出来。我们约定xxx.icons.css的xxx为class前缀标识。以fortawesome字体库为例，它的字体图标 class 都是以fa开头的，如fa-user；fa-cog等，所以文件名就改为了fa.icons.css。