vue中iconfont的使用步骤

1、进入iconfont官网（http://www.iconfont.cn），进入“官方图标”，选择你所需要的图标，加入购物车。

vue项目笔记（7）-使用iconfont_css

2、进入“购物车”，将选择好的图标“添加至项目”，选择对应的项目，点击“确定”。

vue项目笔记（7）-使用iconfont_icon_02vue项目笔记（7）-使用iconfont_图标_03

3、在项目中，点击“下载至本地”，解压缩，文件目录如下：

vue项目笔记（7）-使用iconfont_5e_04

vue项目笔记（7）-使用iconfont_图标_05

4、将字体文件及对应的iconfont.css文件复制到项目目录中，如图：

vue项目笔记（7）-使用iconfont_css_06

5、打开iconfont.css，结合项目，修改字体库引入的路径，本例中路径前面添加了./iconfont。

@font-face {
    font-family: "iconfont";
    src: url('./iconfont/iconfont.eot?t=1533826579118');
    /* IE9*/
    src: url('./iconfont/iconfont.eot?t=1533826579118#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAAWoAAsAAAAACEAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW7kiaY21hcAAAAYAAAABwAAABsgEM04hnbHlmAAAB8AAAAaIAAAHYpb9DdmhlYWQAAAOUAAAALwAAADYSRDImaGhlYQAAA8QAAAAcAAAAJAfeA4ZobXR4AAAD4AAAABMAAAAUE+kAAGxvY2EAAAP0AAAADAAAAAwBIgFwbWF4cAAABAAAAAAeAAAAIAEUAF1uYW1lAAAEIAAAAUUAAAJtPlT+fXBvc3QAAAVoAAAAPgAAAE9B3d+3eJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s04gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVDxbxdzwv4EhhrmZoQEozAiSAwAxFA0ceJzFkbENgDAMBM8JIIQYg5KKCRiIioqZGMxrwCemgAl466L3y1GiBGiBLGbRgO0YRZtSq3lmqHnDqn6gJ6kOn3zx87qUvX3INBdVfNbeJNPxm+y/o78a67o+nV6c40FX9CkoP+JLUGb8DEg38eIXXHicNY/LihNREIbrP6cvp9NJJ+lOX3PpdGL6KNEGY5sBL5koA4MiKLjRpQ+gO8nGRUAEFwrJK4ggjM7shVEJgg/hTnQxj+CqxyQyRfFRxf/zF0Uq0ekvfswDcug8XaY9ekAEbYiexdpIZJ6xIdxEdf2GxWVfJnq/l/Gb8HtawxuN89TXdK0KCx1cSUZjmTGJq/mEXcfIawNhM3poD1o2X6AUyM6r4i57Bzfut6qTS8Wdi7uNUdcRs7Jth7b9RmiqKhhTqhae+p6hGiWteK9WI/c4vsBilEMZ3Xtc6TbtJ6/zZ+2BbwDzOZxm1/qwW4/q634ReY4d6rWKCKJK/1wDsz9m4JTb6W9aFzbgj9iQGJGT4CP7VBywYXHwXzuds7/8JdlEBrSGj817Emm+g3EG9qPY8wN8FV5NFLeFji+miPmsuBFOw2Jf1F2Bz8Iz8N2M9e2Zdd43/pxPySSf+kSDDHKCnQ58azusVwt6B2o6gRfDs5BK/Dw8UZSTw6MNj5YrRVktFxvibYm7bXFry/JaO/NNzxyL5eqa2aqhdH/LfytKWOEAAHicY2BkYGAA4vkvL1TG89t8ZeBmYQCB65PKhRH0/wYWBuZmIJeDgQkkCgBAtQp7AHicY2BkYGBu+N/AEMPCAAJAkpEBFbACAEcLAm54nGNhYGBgfsnAwMKAwAAOmwD9AAAAAAAAdgCEAKwA7HicY2BkYGBgZQgEYhBgAmIuIGRg+A/mMwAAES0BcgAAeJxlj01OwzAQhV/6B6QSqqhgh+QFYgEo/RGrblhUavdddN+mTpsqiSPHrdQDcB6OwAk4AtyAO/BIJ5s2lsffvHljTwDc4Acejt8t95E9XDI7cg0XuBeuU38QbpBfhJto41W4Rf1N2MczpsJtdGF5g9e4YvaEd2EPHXwI13CNT+E69S/hBvlbuIk7/Aq30PHqwj7mXle4jUcv9sdWL5xeqeVBxaHJIpM5v4KZXu+Sha3S6pxrW8QmU4OgX0lTnWlb3VPs10PnIhVZk6oJqzpJjMqt2erQBRvn8lGvF4kehCblWGP+tsYCjnEFhSUOjDFCGGSIyujoO1Vm9K+xQ8Jee1Y9zed0WxTU/3OFAQL0z1xTurLSeTpPgT1fG1J1dCtuy56UNJFezUkSskJe1rZUQuoBNmVXjhF6XNGJPyhnSP8ACVpuyAAAAHicY2BigAAuBuyAlZGJkZmRhZGVkY2BsYI/KzMxryS/NLGoKL/cxMKMLS0xL6M0k604v7S4NJ+BAQDWFwuvAAA=') format('woff'), url('./iconfont/iconfont.ttf?t=1533826579118') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
    url('./iconfont/iconfont.svg?t=1533826579118#iconfont') format('svg');
    /* iOS 4.1- */
}

6、使用iconfont之前需要引入，即在入口文件main.js中引入。

import './assets/styles/iconfont.css'

7、在html文件中，具体的使用方法，如下：

 <span class="iconfont">&#xe624;</span>

其中，&#xe624;为图标对应的64位编码（在iconfont官网复制即可）

8、效果图

vue项目笔记（7）-使用iconfont_5e_07