在线网址：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使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IconFont图标-fontclass使用</title>
<link rel="stylesheet" type="text/css" href="styles/iconfont.css">
</head>
<body>
<i class="iconfont icon-aixin"></i>
</body>
</html>
1.兼容性良好，支持ie8+，及所有现代浏览器
2.相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么
3.因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用
4.不过因为本质上还是使用的字体，所以多色图标还是不支持的
2.symbol使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IconFont图标-symbol使用</title>
<script type="text/javascript" src="scripts/iconfont.js"></script>
<style type="text/css">
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
</head>
<body>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-aixin"></use>
</svg>
</body>
</html>
1.支持多色图标了，不再受单色限制
2.通过一些技巧，支持像字体那样，通过font-size,color来调整样式
3.兼容性较差，支持 ie9+,及现代浏览器
4.浏览器渲染svg的性能一般，还不如png
3.unicode使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>IconFont图标-unicode使用</title>
<style type="text/css">
@font-face {
font-family: 'iconfont';
src: url('fonts/iconfont.eot');
src: url('fonts/iconfont.eot?#iefix') format('embedded-opentype'),
url('fonts/iconfont.woff') format('woff'),
url('fonts/iconfont.ttf') format('truetype'),
url('fonts/iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
</style>
</head>
<body>
<i class="iconfont"></i>
</body>
</html>
1.unicode是字体在网页端最原始的应用方式,兼容性最好，支持ie6+，及所有现代浏览器。
2.支持按字体的方式去动态调整图标大小，颜色等等。
3.但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
4.新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式
网友评论