关于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图标代码拷贝至你的代码中即可。

优点：无论放多大都不存在图片锯齿。

https://www.iconfont.cn/

 

6、css 法

很简单、用你学到的css知识写出来

有个哥们在github上弄了一个项目，纯css写icon。目前已经写了几十个icon，有兴趣的可以去了解并尝试，该方法比较考验css技巧。

https://cssicon.space/#/