简单介绍一下阿里巴巴矢量图标库的使用

最新推荐文章于 2024-12-25 15:49:19 发布

转载最新推荐文章于 2024-12-25 15:49:19 发布 · 731 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/Z-xinmiao/p/6032674.html

文章标签：

#illustrator #前端 #ViewUI

本文介绍阿里巴巴矢量图标库Iconfont的使用方法，包括在线使用、下载到本地及添加至项目的流程。Iconfont提供丰富的图标资源，支持多种格式下载，可方便地应用于前端开发中。

相信做过前端的都知道阿里巴巴矢量图标库，这是一个非常好用的添加小图标的方法，而且是完全免费的，可以在线使用也可以下载到本地使用，而且图标是作为字体插入，不仅可以改变颜色大小，而且在布局方面也非常方便。下面我就来介绍一下阿里巴巴矢量图标库Iconfont。

网址：http://www.iconfont.cn/plus

Iconfont之前只包括官方图标库和所有图标库，现在改版又多了个多色图标库，这个暂时没用过，用过再来讲，这里我一般都选所有图标库。

点进去之后在上面有一个搜索框，可以输入关键字搜索，比如输入：“主页”，就会出现代表主页的图标;这个图标会有很多，大家要注意是线条的还是填充的。
找到你想要的图标之后你可以有三种选择：

第一，将想要的图标保存成图片格式下载到本地，一般有三种格式，SVG下载，AI下载，ＰＮＧ下载;

SVG格式是可缩放的矢量图形，用来定义用于网络的基于矢量的图形;因为图像是矢量图，在改变尺寸时图形质量不会有所损失;

AI格式是指在Adobe Illustrator的软件中制作的矢量图，但是只能在特定软件中打开，也可在PS中打开,不过打开后显示的不是矢量图，而是位图，不是用于设计的一般用不上;

所以较为常用的是存储为PNG格式，作为图片插入；

第二：当你需要下载多个小图标时，将选好的图标统一加入购物车，加入购物车后点击下载代码，就可以下到本地使用了。这一步从前不需要登录，但是现在改版了，需要先登录才可以操作，然后它有一个缺点，就是如果你想要添加几个图标的话需要重新下载所有的，当然，也不是没有解决办法办法的，可以下载新的之后，在css文件夹里再创建一个文件夹，在里面再写一个css外联样式表用来操作新的小图标，不过这样似乎有点劳师动众，而且文件夹里再嵌套文件夹，对网页性能也是有影响的；所以如果你不是非要下载到本地的话，可以尝试第三种方法。

使用时，将打包后的zip包解压，里面有三个html文件，打开，里面是在本地使用的三种方法（之前只有Unicode），大家可以在浏览器中打开，按照步骤操作，把里面的两大段代码拷贝到css文件中，然后就不需要再动他们了，这里要说一下，在进行下面操作之前需要先把解压后文件除了开头字母为demo的几个文件外，其他的都拷贝到css文件夹根目录，确保你在使用时能调到这几个文件（可能有些不是必须，但我比较懒，就都拷贝了）；这样基本就完成了，你想在页面哪里使用，只要在demo里获取Unicode码，替换<i class="iconfont">3</i>中间的就可以了。

第三，当你登录阿里巴巴矢量图标库之后，可以在加入购物车之后选择添加至项目，就可以添加到你在图标库中的项目里，然后在图标管理，我的项目里可以查看，然后点击查看在线链接，把链接的那段代码添加到你的css文件中，就可以在线使用你的项目中的图标了，再添加时只需要重新获取链接就可以了；不过我在做这个的时候发现图标并没有出现，而是出现了两个小框框，后来经过一系列惨烈的虐心尝试，找到了解决办法：（1）本地测试的时候要放在服务器里；（2）要在css文件里添加一段代码：

.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;
}