<i>标签小图标制作

0x01 目的

目前有非常丰富的图标库供给开发者进行选择，在如此繁多的图标库中，如何选到自己中意的图标呢？这是困扰许多程序员的问题，因为知名度高的开源图标使用的重复率很高，而不知名的图标库有很难做到风格统一。所以，不如自己动手画一个图标吧！

0x02 伪类的重要性

什么是伪类，顾名思义伪类就是一个非传统意义的类，他不在浏览器中进行解析，但是他的重要性却不可或缺。

0x3 简单的图标设计

那么，我就抛砖引玉的画一个简单的icon字体图标吧！

.music_play
  //background : #fff;
  position relative
  width 100%
  height 100%
  display inline-block
  &:after{
    position absolute
    left 12%
    top 17%
    content ''
    border-top 1rem solid #fff
    border-left 1rem solid rgba(0,0,0,0)
    transform scaleY(0.7) rotate(45deg)
  }

.music_pause
  //background : #fff;
  position relative
  width 100%
  height 100%
  display inline-block
  &:after{
    position absolute
    left 28%
    top 17%
    content ''
    width 20%
    height 1rem
    border-left 0.2rem solid #fff
    border-right 0.2rem solid #fff
  }

0x04 字体icon的优势

1.速度方面

说到优势，一定是速度方面，毕竟他是字体、和一些线条，加载速度是图片icon无法比拟的。

2.体验方面

字体icon一般是直接加载出来，而图片icon在网络差的情况下可能只加载到一半，这对用户的使用来说体验式很不好的。

3.工程大小

字体icon比图片icon要小很多

4.图标大小的自适应

字体icon如果使用rem单位，就会根据font-size对图标大小进行设置

0x05 字体icon的劣势

1.设计繁琐

一个普通的小图标可能需要好几行代码，更何况复杂图标，耗时耗力

2.大型字体icon会造成页面卡顿

有人用box-shadow花蒙娜丽莎，这种icon是非常消耗性能的。