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

￡神魔★判官ぃ 2021-09-16 02:04 668阅读 0赞

**vue中iconfont的使用步骤**

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

![70][]

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

![70 1][]![70 2][]

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

![70 3][]

![70 4][]

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

![70 5][]

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文件中，具体的使用方法，如下：

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

8、效果图

![70 6][]

[http_www.iconfont.cn]: http://www.iconfont.cn
[70]: /images/20210802/aff84e11ef054d06ad56c4143a46b974.png
[70 1]: https://img-blog.csdn.net/20180809225232835?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 2]: /images/20210802/04702c0b27c843e198b55ba853735e16.png
[70 3]: /images/20210802/b1863d22f85f41a888a1f8555139f99c.png
[70 4]: /images/20210802/2ab342748ac2433bb153c53b53eacf14.png
[70 5]: /images/20210802/75e6144b6e7346e69c2864a68257de8a.png
[70 6]: /images/20210802/1f8166ea435d42ecad351db89a732b05.png