uni-admin 引入iconfont

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

在 uni-admin 项目里使用阿里 iconfont 的完整流程如下，所有步骤均基于官方文档整理，可直接照做：

1. 准备字体文件

   1. 登录 iconfont.cn，把需要的图标加入购物车 → 添加到项目 → 进入「项目设置」。
   2. 项目设置里把「fontClass」写成统一前缀（如 icon-），「fontFamily」写成自定义名称（如 myicon），只勾选 ttf 格式，保存后点击「下载至本地」。
   3. 解压后得到 iconfont.ttf 和 iconfont.css 两个文件。

2. 把文件放进项目
   把 iconfont.ttf 和 iconfont.css 复制到 uni-admin 根目录下的 static 目录（没有就新建）。

3. 调整 css 引用路径
   打开 static/iconfont.css，把 @font-face 改成：

   @font-face {  
    font-family: "myicon";  
    src: url('/static/iconfont.ttf') format('truetype');  
   }  
   .iconfont {  
    font-family: "myicon" !important;  
   }  
   /* 下面每条都是图标对应的 class */  
   .icon-home:before { content: "\e601"; }  
   .icon-user:before { content: "\e602"; }  
   /* …其余图标同理… */  

4. 全局引入样式
   在 uni-admin 根目录的 App.vue 顶部 style 标签最前面写：

   <style>  
   @import "@/static/iconfont.css";  
   </style>  

5. 页面/组件里使用

   • 方式 A（推荐，兼容所有平台）：

     <template>  
     <text class="iconfont icon-home"></text>  
     </template>  

   • 方式 B（使用 uni-icons 组件）：

     <template>  
     <uni-icons custom-prefix="iconfont" type="icon-home" size="24"></uni-icons>  
     </template>  

6. 小程序额外注意
   小程序端不支持本地字体文件，需把 ttf 转成 base64 或放到 https 地址，再在 css 里引用网络地址即可。

完成以上 6 步即可在 uni-admin 任意页面/组件中正常显示阿里 iconfont 图标。