关于阿里妈妈图标制作（转的，留作参考）

 

• 第一步：将你看上的图标加入到购物车
• 第二步：存储为项目或者下载到本地
• 第三步：下载修改并调用CSS文件
• 第四步：在网页中使用icon图标字体

网站使用icon字体图标的好处之前也说过，这里就不再赘述了。

今天无意中发现的iconfont这个网站，很有点相见恨晚的感觉，因为就在昨天我还在为icon字体的事儿发愁：网站本来是使用了icon字体图标的，是主题作者清枫自制的几个文件，效果本来挺好的，但有一个bug是我发现在chrome下面很多图标都无法显示，不管我将字体文件怎样重新编辑和生成都不能解决。

在认识到以我现有的水平是搞不定这个问题的之后，只好很不情愿的将字体文件全部替换成Font Awesome字体了。确实是很不情愿，因为Font Awesome仅字体文件就有好几百KB（svg文件达到194KB），这无疑会增加网站访问的压力，虽然我现在用着七牛每个月10G的免费流量，但也不想给网站增加额外的几百KB请求的负担不是。还好今天发现了iconfont，下面就来说说为什么我要将刚修改好的Font Awesome字体抛弃而转用iconfont。

随便说说两者的优缺点

其实主要是说iconfont的优点和Font Awesome的缺点。-_-|||
iconfont的图标库相当巨大，我在写上一篇文章的时候还是51794个，现在刷新之后图标数量已经是52090个了。如果这么大的一个库里面仍然没有你需要的图标的话，你也可以自己动手制作你自己的图标然后使用网站的在线生成工具来生成字体文件，分分钟就可以使用了。

除了拥有巨大的图标库之外，iconfont最值得推荐的原因还在于她使用上的灵活性（实话说，iconfont给我最初的印象是有点像现在各大运营商主打的可自由搭配的积木套餐），因为她完全可以由你自由搭配组合、按需索取。在自定义Walker类给WORDPRESS导航菜单添加ICON字体图标这篇文章中我就提到过。如果你的网站一共只需要用到5个图标，那么你只需要将这5个图标的字体文件和相关的css下载下来就可以用了。如果你想使用iconfont的CDN服务的话，你都不用下载，直接将这几个图标添加到你自己的项目中，然后在你的网站里面引用一个CSS文件就可以了。

再反观Font Awesome，哪怕你只是要用到2个图标，你都必须要把所有文件都下载下来才能使用。而上面也说了，仅SVG就194KB大了，还有其他几个字体文件加起来一共有400+KB，这还是没有算上同样好几十KB的CSS文件。

孰优孰劣是不是很清楚？相信你已经有了自己的选择。

来，下面说说如何使用，其实很简单，但还是理一个步骤给不是很懂的同学。

第一步：将你看上的图标加入到购物车

官方叫法是“暂存架”，购物车只是我的叫法，好像并不准确，因为不需要花钱的啊，但是它用了一个购物车的图标，所以暂且这样称呼吧。
这里你可以在iconfont的图标库里面寻找你要的图标，但是我不建议你这样做，因为默认给出的几个官方图标库里面的图标是不全的。正确的做法是在导航栏右侧的输入框中输入关键词来搜索图标，这样就会将网友制作的图标都搜出来。（我一开始就是在图标库中找微信、twitter和QQ空间的图标怎么也找不到，后来试着在上面搜索了一下，出来大把的，才知道官方库里面是没有收录这些图标的。。。）

第二步：存储为项目或者下载到本地

就像上面图片中的那样，添加到购物车之后就可以存为项目或下载到本地，这里看你的需求了。反正我是想使用阿里的CDN，所以直接存为项目了。存储为项目的时候你可以选择存为新项目还是添加到已有的项目里面，确定之后会跳转到项目详情页。

第三步：下载修改并调用CSS文件

在项目详情页里面你还是可以选择是下载文件到本地使用还是使用阿里的CDN，当然选择CDN了（也就是页面中的获取在线链接）。这里建议使用Font Class，因为如果你选择Unicode的话CSS中图标的编码都要自己写，这个有点麻烦啊，不符合我这种懒鬼的风格，所以如果你也是懒鬼一枚请将下图中右上角的滑块滑到右侧。

然后鼠标移到左侧的获取在线链接这里就能看到生成的CSS文件了，你现在有两个选择：一是直接调用这个文件，在网站的HTML中修改添加图标的元素的类为"iconfont icon-xxx"的；第二个选择是将这个文件下载下来，然后做一些修改之后传到服务器本地调用，然后在网站的HTML中修改添加图标的元素的类为"icon-xxx"。我选择的是第二种，大家随意。
选择第二种的话需要对CSS做一点小的修改，将选择器“.iconfont”改为“[class*=icon-],[class^=icon-]”：

1. [class*="icon-"],[class^="icon-"]{
   
2. font-family:"iconfont"!important;
   
3. font-size:16px;
   
4. font-style:normal;
   
5. -webkit-font-smoothing:
   
6. antialiased;
   
7. -webkit-text-stroke-width:0.2px;
   
8. -moz-osx-font-smoothing:grayscale;}

然后引用CSS文件就OK了。

第四步：在网页中使用icon图标字体

CSS调用之后就可以在HTML中给元素添加CSS类来显示图标了，看下面这张图，比如我要调用图片中的小火箭这个图标，那我就要将我的HTML修改为

1. <i class="icon-xiaohuojian"></i>

这样既可。

wordpress导航栏怎么使用icon图标字体可以看看这篇文章。