速讯:使用Icon图标的几种方式是啥?Icon图标怎么使用?

发布时间:   来源:CSDN  


(相关资料图)

一.CSS Sprite

这也就是我们平时所说的雪碧图(也叫精灵图),主要通过background-position属性来控制图片显示的位置,不过要注意的是图片是以左上角为坐标原点,坐标的变动应在第四象限内,及x的取值为0到正无穷,y的取值为负无穷到0.

二.使用font icon

首先我们要下载font字体文件,推荐网站:https://www.iconfont.cn/

选择icon后添加购物车,下载代码(建议创建一个项目,将图标加入到项目中,这样方便后续维护),我们会得到以下几个文件,其中标红的为必须文件,一个为css样式文件,其余四个为字体文件。(除了这5个文件,其它文件可以删除)

demo_index.html页面显示了如何使用字体图标:

使用方式:

方式一:font+html

3

方式二:font+css

相关文章Related

返回栏目>>