uniapp - iconfont下载本地并且运用至项目上

1、项目中创建一个文件夹放置iconfont相关文件,例如src/assets/iconfont(名称自己定义)
在这里插入图片描述
2、在iconfont下载项目至本地
在这里插入图片描述
3、解压后把文件复制进1的文件夹中
在这里插入图片描述
4、修改src/assets/iconfont - iconfont.css里的@font-face的src地址,修改成绝对路径
在这里插入图片描述
在这里插入图片描述
注意:这里的123是我瞎写的,下载后的t=xxx是什么,123就是代表那个的。
5、在App.vue中把iconfont引入到项目中
App.vue

<style lang="scss">
@import "./assets/iconfont/iconfont.css";
</style>

6、在项目中使用iconfont图标

<view class="iconfont f-24 lin-24 col-333">&#xe66a;</view>

在这里插入图片描述

### 将 Iconfont 图标下载本地并使用的方法 #### 准备工作 为了确保图标的稳定性和安全性,可以将 Iconfont图标下载本地环境。这不仅提高了项目的可控性,也减少了对外部资源的依赖。 #### 创建个人图标库 访问 Iconfont 官网,创建属于自己的图标库[^1]。选择所需的图标加入购物车,并最终生成一个自定义的图标字体文件集合。 #### 下载图标库 完成上述操作后,在页面上会有一个明显的按钮提示用户下载整个项目压缩包。该压缩包内含多种格式的字体文件(如 .ttf, .woff),以及 CSS 文件用于样式定义。 #### 配置 Vue 项目 对于基于 Vue.js 构建的应用程序来说,可以通过简单的配置实现对这些本地化后的 iconfont 资源的支持: - **安装必要的开发工具** 如果尚未全局安装 `node-sass` 和 `sass-loader` ,那么可以在命令行执行如下指令来安装它们: ```bash npm install node-sass sass-loader --save-dev ``` - **调整 Webpack 加载器设置** 修改 webpack.config.js 或 vue.config.js 中关于 css loader 的部分,允许其处理 `.scss` 文件中的 @import 声明。 - **引入 IconFont 字体** 在 main.scss (或类似的入口 SCSS 文件) 中添加以下代码片段以加载刚刚下载下来的 font 文件夹内的所有资源: ```css /* 引入iconfont */ @import './assets/iconfont.css'; ``` - **HTML 结构修改** 接下来就是按照官方文档说明的方式,在 HTML 文档里利用 `<i>` 或者 `<span>` 标签配合特定 class 来展示所需图标了。例如: ```html <!-- 展示名为 'example' 的图标 --> <span class="iconfont icon-example"></span> ``` 注意这里的类名应当遵循 “iconfont+具体图标名称” 这样的命名约定[^2]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值