1、图标:就是使用图片来制作的。注意:一般背景是透明的,也就是文件后缀名是png。
2、字体图标:本质是字体,将图标变成字体。通过css属性font-size来控制字体的大小,color来控制字体的颜色。
3、使用字体图标的好处:字体图标能够保证图标的清晰度,使得用户视觉感良好。而图片图标,为了兼容一些高分辨率的设备,比如3030的图片,可能会使用6060的图片。
4、如何使用字体图标:
①字体图标库网址:https://www.iconfont.cn/;
②用注册或第三方账号登录图标库;
③把需要用到的图标添加到购物车;
④点击购物车,把购物车中的图标,即点击添加到项目按钮,若没有新的项目;可点击右上方的添加项目;点确定;即可新建了一个包含了需要用到的图标项目文件夹(图标就是之前添加到购物车的图标);
⑤在第④步的新建图标项目页面,点击下载至本地按钮;
⑥下载完成后,可打开iconfont.css文件,修改需要引用的字体库名,默认是iconfont;
⑦可删除掉font文件夹中的这三个文件:demo.css、demo_index.html、iconfont.js;
⑧把下载的文件夹名称修改为font,同时把font文件夹放到项目,之后在需要用到字体图标的html页面,引用font文件夹下的iconfont.css文件;
⑨在引用字体图标的html页面,使用iconfont作为类名:使用字体图标的两种方法:一是直接使用该字体图标的类名作为第二类名;而是使用该字体图标的unicode编码。
图标和字体图标
最新推荐文章于 2022-12-20 16:17:57 发布