uni-app引入iconfont矢量图各种坑

最新推荐文章于 2025-06-19 18:11:45 发布

原创

最新推荐文章于 2025-06-19 18:11:45 发布 · 6.6k 阅读

3 ·

CC 4.0 BY-SA版权

本文讲述了在uni-app框架中引入iconfont矢量图遇到的各种问题，包括全局通用组件的设想、样式作用域限制，以及如何成功实现Font Class方式引入。作者提醒开发者，uni-app社区资源有限，解决问题可能需要自行摸索。

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

uni-app 是什么

uni-app 是一个借鉴 Vue.js、小程序、mpVue 开发跨平台应用的前端框架。
通过编写一套代码，将其编译到iOS、Android、微信小程序等多个平台。
目前可以打包成Android、IOS的App、小程序
有一个严重问题就是用户群少，出现问题基本都要靠自己摸索，关键这样容易浪费特别多时间，谨慎入坑，要不是公司非要用，我也懒得入坑

网上的教程很少，就连简单的引入icon Font矢量图也是问题一推，表示无奈

TIPS

框架定义App.vue文件的样式为全局样式，其他页面为scoped的样式

在官方的文档中找到例子 App.vue

    /* icon图标 */
    @font-face {
      font-family: iconfont;
      font-weight: normal;
      font-style: normal;
      src: url('https://at.alicdn.com/t/font_874003_9rw87a8y04t.ttf')
        format('truetype');
    }
    .icon {
      font-size: 56px;
      color: #fff;
      font-family: iconfont;
    }
    //其他页面引用
    <text class="icon">&#xe6df;</text>

注：src引入的是阿里巴巴unicode链接