精灵图:图片文件较大、图片本身放大和缩小就会失真、一旦图片制作完毕想要更换非常麻烦。
字体图标就可以很处理对精灵图的缺陷。
使用场景:主要用于显示网页中通用、常用的一些小图标。其展示的是图标,但是本质是文字。
优点:
- 轻量级:一个图标字体要比一系列的图像要小,一旦字体加载了,图标就会马上渲染出来,减少了服务器请求。
- 灵活性:本质就是文字,可以随意更改颜色,阴影,透明效果等。
- 兼容性:几乎支持所有的浏览器。
引入文字图标
- 进入https://www.iconfont.cn,找到自己喜欢的小图标,点击下载,复制SVG码。
- 在开编程软件,在Body部分需要现实的地方粘贴SVG码即可正常显示。
- 在CSS里面编写对应的样式即可。