mpvue 中使用 iconfont

最新推荐文章于 2021-09-05 18:17:18 发布

转载最新推荐文章于 2021-09-05 18:17:18 发布 · 167 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b9b26616fb9a05d2c43993e

文章标签：

#javascript #json #ViewUI

本文详细介绍了在MPVue项目中如何使用Iconfont图标，包括静态页面的unicode方式引用，以及动态页面中JSON数据动态注入的Fontclass方式引用。通过本地保存和引用样式文件，解决了小程序环境下直接使用@import引入样式的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

mpvue 中使用 iconfont

静态页面

如果是静态写入 html 的图标可以直接使用 unicode 方式引用，将生成的代码写入app.vue的样式内即可：

// app.vue
<style>
  @font-face {
    font-family 'iconfont' /* project id 796664 */
    src url('//at.alicdn.com/t/font_796664_ekixfyr2isj.eot')
    src url('//at.alicdn.com/t/font_796664_ekixfyr2isj.eot?#iefix') format('embedded-opentype'), url('//at.alicdn.com/t/font_796664_ekixfyr2isj.woff') format('woff'), url('//at.alicdn.com/t/font_796664_ekixfyr2isj.ttf') format('truetype'), url('//at.alicdn.com/t/font_796664_ekixfyr2isj.svg#iconfont') format('svg')
  }
  .iconfont {
    font-family 'iconfont'
    font-size 16px
    font-style normal
    color #9e9595
  }
</style>
复制代码

JSON 数据动态注入

无论是本地 JSON 还是异步请求到的数据，都无法用 unicode 方式正确编译图标，这时可以使用 Font class 方式引用，当然在 Vue 原生中首推这种方式引用，但是在 npvue 中受限于小程序，无法直接使用@import引入生成的样式链接，不过通过一个小步骤也可以解决：

获取链接代码

将获取到的代码保存在本地路径下assets/style/iconfont.css

引用本地文件

// app.vue
<style>@import 'assets/styles/iconfont.css'</style>
复制代码

动态写入图标

<span :class="['iconfont','icon-'+item]" v-for="(item, index) in goodsData.info.label" :key="index"></span>
复制代码

更新库

新增图标后只要重新获取生成链接的代码即可

转载于:https://juejin.im/post/5b9b26616fb9a05d2c43993e