uniapp引入iconfont图标本地
时间: 2025-02-18 14:22:37 浏览: 65
### 正确引入和使用本地 IconFont 图标
#### 在 `App.vue` 文件中引入 CSS 文件
为了确保整个项目都能访问到 IconFont 的样式,在项目的入口文件 `App.vue` 中全局引入 `iconfont.css` 是一种常见做法。具体实现如下:
```html
<style>
@import "@/static/font/iconfont.css";
</style>
```
此方法能够使定义好的图标类名在整个应用内生效,方便后续页面调用[^2]。
#### 修改 `iconfont.css` 路径配置
由于 UniApp 采用的是基于 Vue.js 的单页应用程序架构,因此对于资源路径解析有特定的要求。需调整 `iconfont.css` 内部的字体文件链接为相对于静态资源目录 (`/static`) 下的确切位置。例如:
```css
@font-face {
font-family: "iconfont"; /* Project id */
src: url('/https/wenku.csdn.net/static/fonts/iconfont.woff2') format('woff2'),
url('/https/wenku.csdn.net/static/fonts/iconfont.woff') format('woff'),
url('/https/wenku.csdn.net/static/fonts/iconfont.ttf') format('truetype');
}
```
上述设置保证了不同平台环境下均能正常加载所需字体文件[^4]。
#### 使用 IconFont 字体
完成以上两步之后便可以在模板里通过指定相应 HTML 标签来展示想要使用的图标。通常会借助 `<text>` 或者其他支持自定义样式的标签配合对应的 class 来呈现效果:
```html
<template>
<view>
<!-- 这里的 'icon-a-21-xiugai' 需替换为你实际拥有的图标名称 -->
<text class="iconfont icon-a-21-xiugai"></text>
</view>
</template>
<script setup lang="ts">
// 组件逻辑...
</script>
<style scoped>
.iconfont {
font-family:"iconfont" !important;
speak:none;
display:inline-block;
text-align:center;
width:1em;height:1em;line-height:1;
vertical-align:-0.15em;font-size:16px;
}
/* 添加更多个性化样式 */
.icon-a-21-xiugai:before{
content:'\e600'; /* 替换成对应图标的 Unicode 编码 */
}
</style>
```
这段代码展示了如何在一个组件内部声明并渲染一个来自 IconFont 库的具体图标实例。
阅读全文
相关推荐

















