使用icomoon和iconfont添加字体图标

icomoon网址为 http://icomoon.io，外国网址打开较慢一些。点击想要的图标，下载完成后是一个.zip文件，解压后fonts文件夹要放到原html文件的根目录中，在style中贴上style.css中的第一段代码。

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

对使用了该字体图标的标签样式写font-family: 'icomoon';，标签中的字体图标的写法是：从demo.html中打开，复制小框框；或者在标签中写&#xe9da，均能实现效果。

如果写在before或者after伪元素选择器中，在content: " "中可以复制小框框，也可以写\e9da；均能实现。

div::after {
        position: absolute;
        content: "";
        /* content: "\e901"; */
        font-family: 'icomoon';
        top: 15px;
        right: 10px;
        color: red;
    }

实现效果如下：

国内矢量图可以使用阿里矢量图iconfont，网址为http://www.iconfont.cn/，别少打字母哈，我第一次少输了一个字母，进错了网站哈哈哈哈哈哈哈哈哈哈。这个提供了三种使用方式，第三种可以使用多种颜色，只是兼容性差一些，他的网页有写每种方式的使用说明。我这里用的是第一种Unicode。下载后，将font文件夹放于根目录下，将iconfont.css文件第一段复制一哈，像icomoon的使用一样。只是iconfont提供的字体编码是给了&#x的，因此写在中的标签时复制字体编码即可，用在content中时，将&#x，换成反斜杠\即可。

总之嘞，以扭蛋为例，写在伪元素选择器中的content:" "时，是\e612，写在html中呢是&#xe612。