【十月打卡】第8天——切图基础教程-前端工程师版4-2
2022/10/10 4:24:21
本文主要是介绍【十月打卡】第8天——切图基础教程-前端工程师版4-2,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
4-2字体图标iconfont的使用及_上传
从慕课网的图标讲解——点击右键,点击检查按钮。
icon的优势就是减少请求的时间,如同前面所述的一张图片比多张图片请求时间少。
另外如果是太大的图片还是要引用的图片,就是前面所说的PNG24的图片。
登录iconfond的网站,去百度搜索,就可以如上图。
右上角是要登录的过程。
。
新建项目,把图标引进。按钮如上图
新建好的提示如左图,红杠标识。
上传图标如上图。
在蓝湖工具的切图里选中保存的格式为SVG就可以了。下载后解压到相应文件里备用。SVG是矢量图,没有大小,
上传到iconfond后,要点击保留颜色按钮。
如何使用这些图标呢?点击查看在线菜单,结果是没有代码,
点此生成代码,就有在线链接的代码生成了,直接拷贝用就可以了。
应用端方式有三种如上图。首先复制样式,如下图:
新建一个文件夹,用visual打开,去写代码。
这个看不懂,需要学习visual基本语言的操作。
一二中引用不支持多色,因此要用第三种引用方式才能完成多色的要求。
iconfond不会引入图片,图标大小颜色可以改。
官网上有使用说明,如上图。
与传统PNG相比,icon不会引用图片,图标放大不会模糊。
这篇关于【十月打卡】第8天——切图基础教程-前端工程师版4-2的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30毕设私活神器
- 2024-05-30html
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)