vue项目里使用iconfont图标

在vue项目里使用iconfont图标在线链接

首先，在iconfont官网选择好需要用到的图标添加到项目中，如果没有项目可直接创建项目。

然后我们点击购物车这里，点击添加至项目中


然后在fontclass这边点击链接，（下图是项目之前已经存在图标，所以需要点击更新链接）。


最后我们在vue项目中的 index.html中引用，

就是这段代码

 <link rel="stylesheet" href="//at.alicdn.com/t/font_2074616_x8lcj1ygx.css">

然后我们就可以去使用了。不过需要注意在使用fontclass时，需要加上iconfont这个类,如下使用

 <div class="login">
        <el-form :model="form" status-icon ref="form" class="demo-form">
            <el-form-item>
                <el-input
                        placeholder="请输入手机号"
                        prefix-icon="iconfont icon-shoujihao"
                        v-model="form.phone">
                </el-input>
            </el-form-item>

            <el-form-item prop="pass">
                <el-input type="password" placeholder="请输入密码" prefix-icon="iconfont icon-mima" v-model="form.pass"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="unit" v-show="model == 'register'">
                <el-input type="text" placeholder="请输入单位" prefix-icon="iconfont icon-unit" v-model="form.unit"
                          autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item prop="code">
                <el-input type="text" placeholder="请输入验证码" prefix-icon="iconfont icon-yanzhengma" v-model="form.code"
                          autocomplete="off"></el-input>
                <div class="code">
                    <img src="https://user.zhihuishu.com/zhsuser/image/imageCaptcha" alt="">
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" style="width: 100%;" @click="submitForm('form')">{{model == 'login' ? '登录':
                    '注册'}}
                </el-button>
            </el-form-item>
        </el-form>
    </div>