uniapp正确引入本地iconfont（阿里图标库）（亲测无问题）

<think>根据用户需求，用户想在UniApp中引入线上Iconfont图标库。结合引用内容，以下是解决方案： 1. **获取线上Iconfont链接**： - 登录[阿里矢量图标库](https://www.iconfont.cn/)，选择项目，点击"查看在线链接"。 - 复制生成的`@font-face` CSS代码（注意：默认不带协议头，需手动添加`https:`）。 2. **创建/修改CSS文件**： - 在项目中创建CSS文件（如`iconfont.css`），粘贴复制的代码。 - **关键修改**：将URL前的`//`替换为`https://`（确保协议头正确）。 3. **全局引入CSS**： - 在`App.vue`中全局引入CSS文件： ```css @import url('https://at.alicdn.com/t/font_你的项目ID.css'); /* 直接使用线上链接 */ ``` 或 ```css @import './static/iconfont.css'; /* 若使用本地保存的CSS文件 */ ``` 4. **使用图标**： - 在组件中使用`<text>`或`<view>`标签添加图标类名： ```html <text class="iconfont icon-图标名称"></text> ``` **注意事项**： - **跨平台兼容性**：小程序要求使用HTTPS，且需避免本地字体文件（除非转Base64）。 - **字体重复问题**：若多项目共存，建议修改`font-family`名称避免冲突（引用[3]）。 - **性能优化**：字体文件>40KB时，建议使用线上链接（引用[1]）。 **示例代码**（引用[4]）： ```css /* iconfont.css */ @font-face { font-family: 'iconfont'; src: url('https://at.alicdn.com/t/font_4714252_hq913neoyz.woff2') format('woff2'), url('https://at.alicdn.com/t/font_4714252_hq913neoyz.woff') format('woff'), url('https://at.alicdn.com/t/font_4714252_hq913neoyz.ttf') format('truetype'); } .iconfont { font-family: "iconfont" !important; } ``` §§相关问题§§ 1. 如何在UniApp中修改Iconfont的字体大小和颜色？ 2. 为什么小程序端Iconfont图标不显示？如何解决？ 3. 如何将Iconfont图标转换为Base64格式使用？</think>### UniApp 引入线上 Iconfont 图标库指南 在 UniApp 中使用线上阿里 Iconfont 图标库，需按照以下步骤操作（支持小程序、H5、App 三端）： #### 步骤 1：获取 Iconfont 线上链接 1. 登录[阿里矢量图标库](https://www.iconfont.cn/) 2. 选择项目 → 点击「查看在线链接」 3. 复制生成的 `@font-face` CSS 代码（示例）： ```css @font-face { font-family: 'iconfont'; src: url('//at.alicdn.com/t/c/font_4714252_hq913neoyz.woff2') format('woff2'), url('//at.alicdn.com/t/c/font_4714252_hq913neoyz.woff') format('woff'), url('//at.alicdn.com/t/c/font_4714252_hq913neoyz.ttf') format('truetype'); } ``` #### 步骤 2：创建 CSS 文件 1. 在 UniApp 项目中创建 `styles/iconfont.css` 2. **关键修改**：添加 HTTPS 协议头（小程序强制要求） ```css /* 修改后 */ @font-face { font-family: 'iconfont'; src: url('https://at.alicdn.com/t/c/font_4714252_hq913neoyz.woff2') format('woff2'), /* 添加 https: */ url('https://at.alicdn.com/t/c/font_4714252_hq913neoyz.woff') format('woff'), url('https://at.alicdn.com/t/c/font_4714252_hq913neoyz.ttf') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; -webkit-font-smoothing: antialiased; } /* 添加图标类（从 Iconfont 项目复制） */ .icon-home:before { content: "\e600"; } .icon-user:before { content: "\e601"; } ``` #### 步骤 3：全局引入 CSS 在 `App.vue` 中引入（确保所有页面可用）： ```vue <style> /* 全局引入 */ @import '@/styles/iconfont.css'; </style> ``` #### 步骤 4：使用图标 ```vue <template> <!-- 在页面中使用 --> <view class="iconfont icon-home"></view> <text class="iconfont icon-user"></text> </template> ``` #### 关键注意事项 1. **协议头必须为 HTTPS**：小程序要求所有网络资源使用 HTTPS[^1] 2. **字体名称冲突**：若多个字体都叫 `iconfont`，建议修改 `font-family` 名称避免冲突[^3] 3. **本地文件限制**：字体 >40KB 时 UniApp 不会自动转 Base64，建议直接使用线上链接[^1] 4. **小程序兼容性**：小程序不支持本地字体文件，必须使用线上链接[^2] #### 替代方案：Base64 嵌入 若需完全离线使用（字体 <40KB）： ```css @font-face { font-family: 'iconfont'; src: url('data:font/truetype;base64,<BASE64编码>') /* 从阿里下载后转换 */ } ``` > **提示**：每次在 Iconfont 更新图标后，需重新复制线上链接并更新 CSS 文件。