阿里巴巴矢量图标库使用方法之拿来主义

北京网站建设过程中,基本上每个网站都会用到ICON图标,根据我10年的建站经验得知,一些小的公司的设计师很少自己画图标,基本上都是在网上找现成的png或者psd格式图标,直接使用或者略加修改进行使用,一般这样的icon图标的品质会比较低,虽然做网站的客户并不注意这些细节,因为各行隔山,他们最多的是看整体的感觉,对细节不知道从何把控。但如果你的客户恰恰是和设计相关的行业,比如建筑设计、装饰、广告公司等,他们自己就有自己的设计团队,对设计有自己的见解与观点,如果你再懒省事儿,可能就比较不合适了。

图森品牌为了保证每一单都是竞品,我们的icon都是设计师自己画的,当然icon的创意有很多会参考现有的一些创意。自己画的icon,第一保证了品质,第二保证了创意,第三保证了完全可控,也就是说可以随意创作。

今天的话题是,在图森后台内容管理系统的改版过程中,会用到很多小图标,后台简洁实用即可,因此后台的图标采用的阿里巴巴icon字体库的图标,下面就说说如何使用:

1、登录网址,注册帐号

阿里巴巴矢量图标库网址:http://www.iconfont.cn/ ,注册帐号的过程省略;

2、在搜索栏搜索想要的icon

QQ20171010-115926@2x.png

鼠标放到要使用的图标上面,会出现3个按钮,第一个:加入购物车;第二个:收藏;第三个:下载;

如果你要做的网站会用到很多小图标,那就直接加入购物车,等把所有的选择好了再统一下载;

如果就用一个,可以直接下载;

这里说一说多个icon的使用方法

3、创建项目

在步骤2中,我们选择了很多我们需要的图标,然后点击右上角导航栏的购物车图标,这里会显示已经选择的图标的个数,点击如下图:

QQ20171010-120537@2x.png

点击『添加至项目』按钮:

QQ20171010-120607@2x.png

如果之前你已经添加过项目,可以直接选择项目,然后点击『确定』;

如果是第一次使用,点击上图红色圈起来的按钮,添加新的项目,这样,你选择的多个图标,就添加到了项目中;

4、如何在页面中使用

点击顶部导航栏『图标管理』,然后点击『我的项目』,选择要引入的方式(有3种),如图:

QQ20171010-121035@2x.png

这里用第二种FontClass做示范,首先复制css链接到html页面头部head标签内,

然后在放小图标的地方插入i标签即可


需要注意的是,i 标签有连个class,第一个是iconfont(此样式名称可自定义),第二个就是图标的样式了。


玩法有很多,这里请选择适合自己的方法。

2017-11-14

0 个评论