【前端工具】Iconfont的正确打开方式

在线网址：www.iconfont.com

Iconfont是什么？

阿里妈妈MUX倾力打造的矢量图标管理、交流平台。设计师将图标上传到Iconfont平台，用户可以自定义下载多种格式的icon，平台也可将图标转换为字体，便于前端工程师自由调整与调用。

操作步骤

输入网址，进入页面

图1 Iconfont首页.png

输入关键字，enter进入搜索

图2 搜索.png

将鼠标浮动到图片上面，会出现购物车、收藏和下载三个选项

图3 选项.png

下载选项

图4.1 下载.png

1.调节颜色

图4.2 调节颜色.png

2.调节大小

图4.3 调节大小.png

大小和颜色可以根据系统设定的值进行选择，也可以输入规范的颜色值即可。

3.SVG下载

图4.4 svg下载.png

保存文件到本地，用文本编辑器打开文件，查看源代码

图4.5 svg代码.png

这样就可以看到图片的用SVG格式定义的代码，所以说该工具也是学习SVG技术的利器。

4.AI下载

图4.6 AI下载.png

也是以文件的形式进行下载，下载的文件可以通过Adobe Illustrator进行编辑。

5.PNG下载

图4.7 png下载.png

经PNG下载得到的png格式的图片，可以当做正常的图片来显示，不过在网页中使用时，会根据网页的大小而产生的像素损失。

收藏选项

图5 收藏.png

对于喜欢的图标进行收藏，在图标管理-》我的收藏当中查看收藏的图标，方便下一次的下载

图6 我的收藏.png

购物车选项

点击加入购物车，点击购物车，可以看到

图7 购物车.png

下载素材选项，将回到之前的下载选择当中，不作介绍

图8 下载素材.png

下载代码选项，将以压缩文件的形式将项目打包在文件中，下载到本地

图9 下载代码.png

使用下载本地的代码

将对应的文件copy到对应的文件目录当中，如下图所示

图10 建立目录.png

1.fontclass使用

1.兼容性良好，支持ie8+，及所有现代浏览器
2.相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
3.因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用
4.不过因为本质上还是使用的字体，所以多色图标还是不支持的

2.symbol使用

1.支持多色图标了，不再受单色限制
2.通过一些技巧，支持像字体那样，通过font-size,color来调整样式
3.兼容性较差，支持 ie9+,及现代浏览器
4.浏览器渲染svg的性能一般，还不如png

3.unicode使用

    
    
    


    

1.unicode是字体在网页端最原始的应用方式,兼容性最好，支持ie6+，及所有现代浏览器。
2.支持按字体的方式去动态调整图标大小，颜色等等。
3.但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
4.新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式