uniapp引入iconfont图标

最新推荐文章于 2024-05-11 16:37:28 发布
最新推荐文章于 2024-05-11 16:37:28 发布
阅读量188 收藏
点赞数
文章标签： uni-app css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43778556/article/details/131021401
版权

1.iconfont官网下载好图标并解压
2.将以下文件复制到项目中
在这里插入图片描述

3.文件在项目中的位置
在这里插入图片描述
4.打开iconfont.css文件修改“@font-face”里面的路径，修改为相对路径“@/static/fonts”，示例如下
在这里插入图片描述

5.在App.vue中的

@import “@/static/fonts/iconfont.css”;

6.使用

<text class="iconfont icon-a-21-xiugai"></text>
十友九
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp 引入iconfont的方法
Gblfy_Blog
06-28 3059
uniapp 引入iconfont的方法
【小程序开发】uniapp引入iconfont图标及使用方式
热门推荐
qq_49002903的博客
10-24 6万+
你还在发愁不知道如何在uniapp开发中使用iconfont阿里图标库吗？ 你还在是下载一张张图片用来开发项目嘛？来试试这个iconfont图标库，很香的
如何在uniapp项目引入阿里图标库的iconfont(线上)
最新发布
it_laowu的博客
05-11 984
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
uni-app小程序引入iconfont的三种方式详解（无需下载文件到项目）
qq_39961695的博客
12-31 9434
全：小程序中使用iconfont的三种方式
uniapp引入阿里图标库iconfont的三种方式
Hou_Qiang的专栏
05-10 3790
一、本地引入 1、下载font class文件至本地 2、解压后，将字体文件.ttf,.woff,.woff2和iconfont.css一起拷贝到static目录下 3、修改iconfont.css文件（非常重要） @font-face { font-family: "iconfont"; /* Project id 2142473 */ src: url('~@/static/iconfont.woff2?t=1620622127571') format('woff2'),
【小程序开发】uniapp中引入iconfont方式 保姆级教程
m0_64373473的博客
09-21 1931
uniapp中引入iconfont
vant自定义引入iconfont图标
qq_41672008的博客
06-06 3万+
我也算是使用vant UI的初学者，但是我这个人比较喜欢思考一些问题，喜欢钻研一些问题，2333. 想要了解vantUI的可以点击https://youzan.github.io/vant/#/zh-CN/intro 因为vantUI给的图标非常少，为了满足自己的需求，就应该找到一种方法来向vant添加自己自定义的图标，对于自定义图标我第一时间想到的就是阿里的iconfont矢量图库，相信大家...
uniapp 自定义图标icon
m0_46554818的博客
08-06 1万+
uniapp 自定义图标 超级简单准备工作： 例如上边的图标，我们发现都是蓝白切换，这时候用img整个项目就太大了，占内存，这是我们可以把他做成uniapp内置的icon图标。 准备工作： 1.先把图片以svg格式导入阿里图标库（用ps把png格式图片转化成svg格式没用，这一步可以让设计直接上传阿里图标库，提前把png图片命名好发给设计部） 类似这种 （其实白色的精灵图可以不用命名） 2.去uniapp插件市场下载 iconfont 插件（iconfont插件） 下载好放入文件的组件部分，如下图：
uniapp字体图标的使用
12-31
在uniapp中，我们可以借助第三方字体库如Ionicons、FontAwesome或者自定义的字体库来引入这些图标。 二、引入字体图标库 1. 安装字体库：首先，你需要选择一个字体图标库，例如Ionicons，通过npm命令行工具进行安装...
uniapp+editor图标文件+iconfont.ttf
03-10
uniapp editor富文本编辑器的图标文件
uniapp常用图标.zip
01-15
"uniapp常用图标.zip"这个压缩包很可能包含了一组专门为 UniApp 设计的常见图标集合。 在压缩包中的"base"文件可能是这些图标的资源库，包含了不同格式和大小的图标文件，如SVG、PNG或者字体文件（.ttf或.woff），...
uniapp小程序tabbar图标
07-25
描述中提到的"uniapp小程序tabbar整套图标，包含选中和非选择的"意味着这是一个完整的图标集，用于构建uniapp小程序的底部导航栏。文件名如set_001.png、set_002.png等，可能代表不同的tabbar选项，例如"设置"，其...
uniapp自定义tabbar图标样式
10-13
本话题主要关注如何在uniAPP中自定义tabbar的图标样式，这对于提升应用的用户体验和品牌一致性至关重要。 首先，我们需要了解uniAPP的tabbar组件。Tabbar是底部导航栏，通常包含多个页面标签，用户可以通过点击不同...
uniapp正确引入本地iconfont（阿里图标库）（亲测无问题）
高桥留de博客
12-07 994
uniapp正确引入本地iconfont（阿里图标库）
UNI-APP引入iconfont的方法
qq_24537119的博客
03-05 1526
在uniapp中引入iconfont的方法有两种，一种是本地引入的，还有一种是在线引入的。 先说一下在线引入的方法，在iconfont中创建一个你自己的项目，之后添加一些图标进去， 选择unicode然后复制代码。然后下载代码至本地，在里面找到iconfont.css我们只用这个，拿到CSS之后放进我们的uniapp项目中，并将代码张贴上去，替换掉之前的代码 在app.vue中引入CSS文件 使用的时候也很简单 可以看到上面的方法还是引入了外链的，我们普遍是不喜欢这样做的，总.
uniapp项目中引入iconfont图标
weixin_52020362的博客
04-09 868
uniapp引入iconfont图标
uniapp引入本地iconfont
王延朕的博客
12-06 1227
2.我们可以用的是 iconfont.css, 我们将 iconfont.css 拷贝至项目的 src/static/font/iconfont.css。1.iconfont官网下载相应代码（
4.uniapp如何引入iconfont图标
m0_56986233的博客
03-19 3274
1.准备一份iconfont图标库 这里我给大家省功夫，代码如下 @font-face { font-family: "iconfont"; /* Project id 3231515 */ src: url('//at.alicdn.com/t/font_3231515_h5tzgobi5z.woff2?t=1646898877456') format('woff2'), url('//at.alicdn.com/t/font_3231515_h5tzgobi5z.woff?t=164
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值