阿里巴巴矢量图标库Iconfont的使用(一)---下载代码方式

原创 阿波罗D波 随笔 学习收获 917阅读 2017-05-16 16:08:08 举报

我的Iconfont第二篇笔记《阿里巴巴矢量图标库Iconfont的使用(二)---创建图标项目》

我的Iconfont第三篇笔记《阿里巴巴矢量图标库Iconfont的使用(三)---在线链接方式》

阿里巴巴矢量图标库现在的icon图标相当的多,做项目页面上出现的小图标基本上都可以在这里找到,所以掌握iconfont的使用方法非常有用!

使用方法:
第一步:注册账号,当然也可以不注册以游客身份使用,注册账号的好处:以后发现好的图标可以收集起来方便后期使用;可以方便和同事做项目合作;可以记录你使用过的图标,方便以后查找;
第二步:查找图标,例查找“微信”图标,可以搜索到6800多个微信图标,如图:

阿里巴巴矢量图标库Iconfont的使用(一)---下载代码方式

阿里巴巴矢量图标库Iconfont的使用(一)---下载代码方式

第三步:选择喜欢的图标,加入到购物车;

阿里巴巴矢量图标库Iconfont的使用(一)---下载代码方式

第四步:点击网页右上角的购物车可以查看和删除收集的图标,然后点击下面【下载代码】选项下载,下载好以后解压;

阿里巴巴矢量图标库Iconfont的使用(一)---下载代码方式

解压出的文件,我把主要的文件用框分成了3部分,蓝框是一个demo案例,里面是官方简单写了使用icon图标操作步骤;绿框是要用的图标的css样式iconfont.css;红框里面是字体图标的源资源;

阿里巴巴矢量图标库Iconfont的使用(一)---下载代码方式

第五步:假设项目的html文件、css文件夹、fonts文件夹是在同一级目录下。把红框里面字体图标的资源文件复制到项目的fonts文件夹里,把绿框里面的css文件iconfont.css复制到项目的css文件夹里面;

阿里巴巴矢量图标库Iconfont的使用(一)---下载代码方式

第六步:在html文件里link引入iconfont.css,这里路径应该是css/iconfont.css

第七步:修改iconfont.css里面的内容,因为字体图标源资源的路径发生了变化,所以要修改路径,下图中绿框是修改前默认的路径,橙色框是修改后的路径,这里路径应该改为是../fonts/;另外,通过修改类iconfont里面的font-size可以调整图标的显示大小,例我这里改为100px;通过给类iconfont加color属性,可以修改图标的颜色,例我这里修改为gold;通过修改类icon-weixin可以更改图标的名字,例我这里改为fosun-weixin;

阿里巴巴矢量图标库Iconfont的使用(一)---下载代码方式

html文件代码:

阿里巴巴矢量图标库Iconfont的使用(一)---下载代码方式

显示效果:

阿里巴巴矢量图标库Iconfont的使用(一)---下载代码方式

至此,通过下载代码方式就可以在项目里使用阿里巴巴矢量图标库Iconfont里的图标了。

有错的和不懂的地方,可以写在评论里面,我会及时更改回复,欢迎大家指导纠正,谢谢!

评论 ( 2 )
最新评论
阿波罗D波 1F 2017-05-16 17:34:42 2F

这个是下载的iconfont.css里自动生成的,具体代表什么我也不太清楚,不好意思,劳烦看到评论的大神们能帮助我们两个解答下,谢谢啦

cardsix 2017-05-16 17:25:18 1F

.woff?后面的t代表什么?