在线网址: http://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 使用
- <!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 的引用方式
来源: http://www.jianshu.com/p/f0e66444ba44