问题记录:
按照了网上的办法在阿里矢量图库下载了iconfont的文件,引入项目中并进行了样式引用,但引用出的样式只是一个方块。
<el-form-item label="登录密码:" prop="password">
<el-input v-model="form.password" :type="isShowEye?'password':'text'" placeholder="请输入密码" maxlength="30">
<i slot="suffix" :class="isShowEye?'icon-visible':'el-icon-view'" @click="isShowEye ? (isShowEye = false) : (isShowEye = true)"></i>
</el-input>
</el-form-item>
解决问题:
找到一位博主的文章,是说iconfont为iconfont.css中的类名,iconfont必须填写,否则图标显示为一个方块。样式的前缀之前加了inconfont显示无问题了。
https://blog.csdn.net/Kotoba209_/article/details/99677744
<el-form-item label="登录密码:" prop="password">
<el-input v-model="form.password" :type="isShowEye?'password':'text'" placeholder="请输入密码" maxlength="30">
<i slot="suffix" :class="isShowEye?'iconfont icon-visible':'el-icon-view'" @click="isShowEye ? (isShowEye = false) : (isShowEye = true)"></i>
</el-input>
</el-form-item>