1.在App.vue中中引入unicode链接
添加字体文件的引入后,定义iconfont样式类:
2.使用
3.使用v-for循环
要实现这种效果:
首先下载iconfont的压缩包,找到iconfont.css文件,找到每个图标的content属性:
在斜杠后面加u,就可以使用了
<template>
<div
class="classifyItem"
v-for="(item, index) in goodsClassify"
:key="index"
>
<i class="iconfont classifyIcon"> {{ item.icon }}</i>
<div class="classifyTxt">{{ item.name }}</div>
</div>
</template>
<scpript>
goodsClassify: [
{
name: "书籍笔记",
icon: "\ue60e",
index: 0,
},
{
name: "日用电器",
icon: "\ue619",
index: 1,
},
{
name: "美妆饰品",
icon: "\ue6e6",
index: 2,
},
{
name: "生活用品",
icon: "\ue7db",
index: 3,
},
{
name: "服饰鞋包",
icon: "\ue600",
index: 4,
},
{
name: "美味零食",
icon: "\ue601",
index: 5,
},
],
</script>