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

news/2025/2/19 1:07:05/

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>

在这里插入图片描述


http://www.ppmy.cn/news/1572426.html

相关文章

8、《5分钟构建RESTful API:Spring Boot Web开发入门》

5分钟构建RESTful API&#xff1a;Spring Boot Web开发入门 一、RESTful API核心认知 REST&#xff08;Representational State Transfer&#xff09;通过HTTP协议实现资源操作&#xff0c;其核心特征包括&#xff1a; 资源以URI标识&#xff08;/api/users&#xff09;通过…

【webview Android】视频获取首帧为封面

文章目录 需求分析获得首帧其他方法 需求分析 客户端中h5上传视频&#xff0c;视频封面默认首帧。 遇到问题&#xff1a;原生的video现象如下 IOS会在加载好后显示首帧&#xff08;没加载好显示黑屏&#xff0c;符合预期&#xff09;Android加载好后默认封面为一个奇怪的占位…

IPv4 协议和TCP 协议的区别

&#x1f4e1; IPv4 协议 vs TCP 协议&#xff1a;核心区别 维度IPv4 协议TCP 协议OSI 层级网络层&#xff08;Layer 3&#xff09;传输层&#xff08;Layer 4&#xff09;主要作用负责数据包的寻址和路由&#xff08;确定数据去哪里&#xff09;负责可靠的数据传输和连接管理…

SpringAI集成DeepSeek实战

SpringAI集成DeepSeek实战教程 引言 Spring AI作为Spring生态系统中的新成员&#xff0c;为开发者提供了便捷的AI集成方案。本文将详细介绍如何在Spring项目中集成DeepSeek模型&#xff0c;实现智能对话等功能。 环境准备 在开始之前&#xff0c;请确保您的开发环境满足以下要…

5. Docker 本地镜像发布到阿里云

5. Docker 本地镜像发布到阿里云 文章目录 5. Docker 本地镜像发布到阿里云1. 本地镜像发布到阿里云流程最后&#xff1a; 1. 本地镜像发布到阿里云流程 镜像的生成方法&#xff1a; 基于当前容器创建一个新的镜像&#xff0c;新功能增强 docker commit [OPTIONS] 容器ID [REP…

使用docker compose启动postgres并设置时区

设置PostGres时区 方法 1: 使用 POSTGRES_INITDB_ARGS 设置时区方法 2: 使用初始化脚本设置时区创建 init-user-db.sql更新 docker-compose.yml 启动服务 要在启动 PostgreSQL 数据库时设置时区&#xff0c;可以通过在 docker-compose.yml 文件中添加环境变量或通过配置文件来实…

独立站赋能反向海淘:跨境代购系统的用户体验与支付解决方案

随着全球化的推进以及消费者对海外商品多样化需求的增长&#xff0c;独立站赋能的反向海淘模式愈发火热&#xff0c;其中跨境代购系统的用户体验与支付解决方案起着关键作用。 一、跨境代购系统的用户体验 界面友好性 独立站的页面设计需要简洁、直观&#xff0c;方便用户快速…

【Maven】多module项目优雅的实现pom依赖管理

【Maven】多module项目优雅的实现pom依赖管理 【一】方案设计原则【二】项目结构示例【三】实现思路【1】可能的问题点&#xff1a;【2】解决方案的思路&#xff1a;【3】需要注意的地方&#xff1a;【4】可能的错误&#xff1a; 【四】实现案例【1】父POM设计&#xff08;pare…