vue项目笔记(7)-使用iconfont
程序员文章站
2022-03-31 22:59:01
...
vue中iconfont的使用步骤
1、进入iconfont官网(http://www.iconfont.cn),进入“官方图标”,选择你所需要的图标,加入购物车。
2、进入“购物车”,将选择好的图标“添加至项目”,选择对应的项目,点击“确定”。
3、在项目中,点击“下载至本地”,解压缩,文件目录如下:
4、将字体文件及对应的iconfont.css文件复制到项目目录中,如图:
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"></span>
其中,为图标对应的64位编码(在iconfont官网复制即可)
8、效果图
上一篇: 今天嫂子抱怨说小侄女