关于css图标icon的六种实现方法
关于icon，可以有6种方法来实现icon
- img 法
- background 法
- css sprites 法
- font 法
- SVG 法
- CSS法
1、img 法
顾名思义用img标签插入图片。
缺点：图片过多时，增加服务器请求，当然你可以使用cdn。
2、background 法
把图片放在css背景标签中，background属性能够控制图片居中，平铺，横向或者纵向自适应剪裁，在做复杂的图片处理时用background属性比img标签要好。
3、css sprites 法
国内一般叫雪碧图或者精灵图，思路就是将多张图片拼成一张背景图，然后选择性展示背景图某一部分来达到展示不同icon的目的。
优点：减少请求。
可以用网上的css sprites生成器生成，然后将每张icon的位置代码复制粘贴即可。
https://spritegen.website-performance.org/
4、font 法
简单的说就是用字体做icon，有些设计师将一些常用的icon集合做成了一套字体，通过字体选择将icon打出来，跟搜狗输入法的特殊符号有点像，不过大小不太好调整，得用font-size。
5、SVG 法
目前比较流行的方法，用svg矢量图做成icon图标。比如阿里巴巴矢量图图标库，比如搜索iphone，会有很多设计师设计的svg图片供你使用，选好图片后创建项目，生成js代码，按照教程将网站上生成的icon图标代码拷贝至你的代码中即可。
优点：无论放多大都不存在图片锯齿。
6、css 法
很简单、用你学到的css知识写出来
有个哥们在github上弄了一个项目，纯css写icon。目前已经写了几十个icon，有兴趣的可以去了解并尝试，该方法比较考验css技巧。