vue项目使用iconfont遇到的问题

解决Iconfont图标显示为方块的问题

最新推荐文章于 2024-04-24 16:02:44 发布

原创最新推荐文章于 2024-04-24 16:02:44 发布 · 725 阅读

0 ·

CC 4.0 BY-SA版权

在项目中引入阿里矢量图库的Iconfont图标时遇到显示为方块的错误，通过检查发现是样式类名使用不当。博主指出需要确保类名前缀为' iconfont'，修正后图标正常显示。此问题解决方法对于使用Iconfont的前端开发者具有参考价值。

问题记录：

按照了网上的办法在阿里矢量图库下载了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.youkuaiyun.com/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>