在Vue工程中结合Element-Ui以及iconfont

iconfont的下载使用

首先,需要在阿里巴巴应用图标库中注册一个账号,然后找寻自己需要的图标,将他们加入购物车中。

然后点击购物车,将他们添加至同一个项目中(没有项目就新建)。进入我的项目

最后,只需将以下文件加入工程中

再在 main.js 文件中,引入 iconfont.css 文件即可,例如

1
2
// 路径为你自己存放的路径
import '../../iconfont.css'

对iconfont.css 进行修改

只需要修改 .iconfont 里面的内容就好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*
**除了font-family以外,其余内容与 element 框架中 icon 的配置相同
*/
.iconfont {
font-family: "iconfont" !important;
speak: none;
font-style: normal;
font-weight: 400;
font-variant: normal;
text-transform: none;
line-height: 1;
vertical-align: baseline;
display: inline-block;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

在代码中直接使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*
** 首先,保证 iconfont.css 文件里面这样的内容没被删除
*/
.icon-my-email:before {
content: "\e643";
}

.icon-my-password:before {
content: "\e611";
}

.icon-my-user:before {
content: "\e614";
}

这样我们就可以通过在 html 代码中使用,示例如下

1
2
3
<i class="iconfont icon-my-email"></i>
<!-- 也可以直接在 element 组件中直接使用 -->
<el-input v-model="password" placeholder="密码" prefix-icon="iconfont icon-my-password" suffix-icon="el-icon-view"></el-input>

好饿,想吃两个小饼饼(# ̄y▽ ̄)╭
0%