HTML5教程

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

本文主要是介绍【十月打卡】第8天——切图基础教程-前端工程师版4-2,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

https://img2.sycdn.imooc.com/634177e700014b7102820030.jpg

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

https://img3.sycdn.imooc.com/6341786e0001aaa510910653.jpg

https://img2.sycdn.imooc.com/634178a000014da910960631.jpg


https://img3.sycdn.imooc.com/63417b840001e84e10730635.jpg

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

https://img1.sycdn.imooc.com/63417bc900015a5610170576.jpg

https://img1.sycdn.imooc.com/63417bf60001de4606650224.jpg

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

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

https://img1.sycdn.imooc.com/63417ccf000193c310910596.jpg



https://img4.sycdn.imooc.com/63417ce20001815710940622.jpg

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


右上角是要登录的过程。https://img3.sycdn.imooc.com/63417d5b00011b0603870220.jpg

https://img4.sycdn.imooc.com/63417d93000132d206670230.jpg


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


https://img4.sycdn.imooc.com/63417df60001fe4e05190397.jpg


https://img1.sycdn.imooc.com/63417e0a0001668a01440178.jpg新建好的提示如左图,红杠标识。


https://img3.sycdn.imooc.com/63417e52000191b907120301.jpg

上传图标如上图。


https://img1.sycdn.imooc.com/63417e8f0001921906960327.jpg

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

https://img1.sycdn.imooc.com/63417f490001008e03910237.jpg

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

https://img4.sycdn.imooc.com/63417f810001d09c07290269.jpg

https://img3.sycdn.imooc.com/63417fc0000113ea04040233.jpg

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


https://img4.sycdn.imooc.com/634180150001677204160244.jpg

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

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

https://img1.sycdn.imooc.com/634183460001544704260389.jpg

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

https://img4.sycdn.imooc.com/634183af00016aed09980548.jpg


https://img4.sycdn.imooc.com/634183e50001860508990448.jpg

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

https://img4.sycdn.imooc.com/634182850001ec2b08460352.jpg

https://img1.sycdn.imooc.com/634182b40001bf0008700435.jpg

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


https://img3.sycdn.imooc.com/6341829500018f2008160297.jpg

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

https://img2.sycdn.imooc.com/634184da0001cea001800087.jpg

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


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







这篇关于【十月打卡】第8天——切图基础教程-前端工程师版4-2的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!