CSS 字体图标的使用方法

发表时间: 2024-05-01 19:51

图片格式分类

图片格式

位图图片: bmp、jpg、gif、png

矢量图图片: 以svg格式为代表, 可缩放矢量图形(ScalabelVector Graphics)。 SVG是一种使用XML格式定义的图像。

什么是传统方式的图标

图标采用图片格式, 有bmp、jpg、gif、png等文件格式

大小改变后, 可能会出现锯齿效果, 影响美观

什么是字体图标

图标全部字体格式

可以使用color、font-size..., 改变图标的颜色、大小等样式

利用CSS雪碧图处理图标

该技术的全称是: CSS Sprite, 又称css雪碧图

使用font+html实现字体图标的优缺点

优点: 轻量性、灵活性、兼容性好, 是目前被广泛使用的技术

缺点: 大多数的图标字体只能被渲染成单色

什么是svg格式?

它的英文全称为 Scalabel Vector Graphics, 意思为可缩放的矢量图形。

svg矢量图库官网有哪些?

阿里巴巴矢量图标库官网: http://www.iconfont.cn

icommoon图标库官网: https://icomoon.io/app/#/select