继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【十月打卡】第8天——切图基础教程-前端工程师版4-2

weixin_慕仰6527671
关注TA
已关注
手记 33
粉丝 1
获赞 1

http://img2.mukewang.com/634177e700014b7102820030.jpg

4-2字体图标iconfont的使用及_上传

http://img3.mukewang.com/6341786e0001aaa510910653.jpg

http://img2.mukewang.com/634178a000014da910960631.jpg


http://img3.mukewang.com/63417b840001e84e10730635.jpg

从慕课网的图标讲解——点击右键,点击检查按钮。

http://img1.mukewang.com/63417bc900015a5610170576.jpg

http://img1.mukewang.com/63417bf60001de4606650224.jpg

icon的优势就是减少请求的时间,如同前面所述的一张图片比多张图片请求时间少。

另外如果是太大的图片还是要引用的图片,就是前面所说的PNG24的图片。

http://img1.mukewang.com/63417ccf000193c310910596.jpg



http://img4.mukewang.com/63417ce20001815710940622.jpg

登录iconfond的网站,去百度搜索,就可以如上图。http://img3.mukewang.com/63417d2b0001504c10400634.jpg


右上角是要登录的过程。http://img3.mukewang.com/63417d5b00011b0603870220.jpg

http://img4.mukewang.com/63417d93000132d206670230.jpg


新建项目,把图标引进。按钮如上图


http://img4.mukewang.com/63417df60001fe4e05190397.jpg


http://img.mukewang.com/63417e0a0001668a01440178.jpg新建好的提示如左图,红杠标识。


http://img3.mukewang.com/63417e52000191b907120301.jpg

上传图标如上图。


http://img1.mukewang.com/63417e8f0001921906960327.jpg

在蓝湖工具的切图里选中保存的格式为SVG就可以了。下载后解压到相应文件里备用。SVG是矢量图,没有大小,

http://img.mukewang.com/63417f490001008e03910237.jpg

上传到iconfond后,要点击保留颜色按钮。

http://img4.mukewang.com/63417f810001d09c07290269.jpg

http://img3.mukewang.com/63417fc0000113ea04040233.jpg

如何使用这些图标呢?点击查看在线菜单,结果是没有代码,


http://img4.mukewang.com/634180150001677204160244.jpg

点此生成代码,就有在线链接的代码生成了,直接拷贝用就可以了。

应用端方式有三种如上图。首先复制样式,如下图:

http://img1.mukewang.com/634183460001544704260389.jpg

新建一个文件夹,用visual打开,去写代码。

http://img4.mukewang.com/634183af00016aed09980548.jpg


http://img4.mukewang.com/634183e50001860508990448.jpg

这个看不懂,需要学习visual基本语言的操作。

http://img4.mukewang.com/634182850001ec2b08460352.jpg

http://img.mukewang.com/634182b40001bf0008700435.jpg

一二中引用不支持多色,因此要用第三种引用方式才能完成多色的要求。


http://img3.mukewang.com/6341829500018f2008160297.jpg

iconfond不会引入图片,图标大小颜色可以改。

http://img2.mukewang.com/634184da0001cea001800087.jpg

官网上有使用说明,如上图。


与传统PNG相比,icon不会引用图片,图标放大不会模糊。







打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP