一、图标下载

图标下载地址：https://www.iconfont.cn/home/index

在图标库选择或搜索需要的图标，点击下载按钮，选择图标颜色然后png下载

image-20211201170118902

二、PS

1、打开PhotoShop软件，将图片背景拖到PS软件形成新的工程，再将刚下载的图标拖进去，按照需求改变其大小及位置

2、点击文字工具，在图标旁边录入文字

image-20211201170458833

3、将图片编辑成想要的效果后，点击文件–》导出–》快速导出为png，就可以获得ps的图片

image-20211201170822320

三、引用到页面

1、将新生成的png图片放在工程图片文件夹中

image-20211201171511634

2、在文件app.css中设置该图标的引入类样式，其中background是设置背景图片，background-position是定位图片位置

image-20211201171038909

tips：background-position值的设置方式：

image-20211201171307934