vue中css通过伪类选择器使用icon众所周知，大家在做网站时都会使用icon。icon也是有很多种使用方式，css引

众所周知，大家在做网站时都会使用icon。icon也是有很多种使用方式，css引入，svg……
icon网站：
iconfont-阿里巴巴矢量图标库
 icomoon.io/#icons
最近用swiper时，用到了修改swiper的左右切换按钮，因为这里的按钮用的是:after，所以以我的经验来做我就是用css引入也就是用的icomoon。
使用方法：launch the app

浏览器打开icomoon网站：icomoon.io/#icons 找到plans，找到launch the app
选中你所需要的icons，点击generate font
进入download下载设置页面 01.U+&fi是图标信息显示控制
02.preferences是下载的压缩包信息设置包名，版本等等
03.用户选中需要使用的图标，检查是否有疏漏。其举例第一个home，e900是该字符的编码，旁边的小方块也是该字符独有的小方块，别看这个小方块与其他字符的小方块一样，但是渲染出来是不一样的。在使用css伪元素选择时可以在伪元素的content中使用字符的编码或者是对应字符的方块。(注意使用字符编码时应在前面加上撬棍字符 \e900)。
确认字符图标无误后，点击generate font按钮下面的download按钮下载压缩包。解压压缩包，压缩包目录如下：

这里只会用到fonts文件夹和demo.html fonts文件夹中存放的是icon图标文件，demo.html是在icomoon网站的doownload页面，也就是各个图标对应的编码和符号。所以就可以直接打开这个demo文件，从而无需很麻烦的再去网站找了。

在css中使用。不论应用在什么框架，不需要想那些。只需要写在css文件中。我这里用的是vue。

将压缩包中的fonts文件夹复制到你的项目中
声明样式代码，此片段写在样式的最上面即可如果多文件使用则声明到最外层。切记，将这些路径全都指定到针对你项目的文件fonts目录位置

@font-face {
    font-family: 'icomoon';
    src:  url('@/assets/css/fonts/icomoon.eot?p4ssmb');
    src:  url('@/assets/css/fonts/icomoon.eot?p4ssmb#iefix') format('embedded-opentype'),
        url('@/assets/css/fonts/icomoon.ttf?p4ssmb') format('truetype'),
        url('@/assets/css/fonts/icomoon.woff?p4ssmb') format('woff'),
        url('@/assets/css/fonts/icomoon.svg?p4ssmb#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

在需要使用的dom元素的伪元素选择器中使用icon。因为伪元素选择器都需要写content。还需要切记的一点是在使用icon的dom元素指定字体样式与声明样式代码指定的font-family相同。示例：

.box:after{
    content: "\e900";
    font-size: 20px;
    font-family: 'icomoon';
}

或

.box:after{
    content: "";
    font-size: 20px;
    font-family: 'icomoon';
}