关于Uni-app引入icon的学习

最新推荐文章于 2024-11-01 12:15:25 发布

沙雕JavaScripter

最新推荐文章于 2024-11-01 12:15:25 发布

阅读量898

点赞数

CC 4.0 BY-SA版权

文章标签： javascript css css3 html5

本文链接：https://blog.csdn.net/TianGuaJSTec/article/details/107792900

本文详细介绍了在Uni-app项目中引入图标的两种方法：线上引入和本地引入。线上引入通过官网下载并配置iconfont.css文件，本地引入则需额外将iconfont.ttf文件转换为base64编码。文中提供了具体步骤及代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于Uni-app引入icon的学习（自己实践了，没问题的方法，也可参考下面两种方法的链接）

一：线上引入

链接：https://blog.csdn.net/gyueh/article/details/106792103?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

步骤1：去官网下载好需要的icon（点击unicode，然后点下载至本地，然后解压，复制iconfont.css文件到static文件夹（你需要的任意位置））

步骤2：打开iconfont.css文件，去官网将在线链接（@font-face{。。。。。。}）复制，然后将复制的内容覆盖本来的@font-face{。。。。。。}

步骤3：在App.vue文件的style中引入iconfont.css文件

步骤4：使用

例如1、不使用data，直接在template中使用

<text class="iconfont icon-dianzan"></text>

例如2、使用data遍历出来

<view v-for="(item,index) in middleMyZC">
   <text class="自己的样式" :class="item.icon"></text> 
</view>

data(){
	return{
		middleMyZC: [
		    {icon: 'iconfont icon-dianzan'},
		    {icon: 'iconfont icon-fenxiang'},
		    {icon: 'iconfont icon-hezi'},
		    {icon: 'iconfont icon-lishi'}
		]
	}
}

二：本地引入

链接：https://blog.csdn.net/weixin_30951743/article/details/99403315?utm_medium=distribute.pc_relevant.none-task-blog-OPENSEARCH-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-OPENSEARCH-1.channel_param

1、去官网下载好需要的icon

在这里插入图片描述

2、下载至本地，然后解压，复制iconfont.css文件到static文件夹（你需要的任意位置）

3、打开这个网站：https://www.giftofspeed.com/base64-encoder/ 上传iconfont.ttf这个文件，这个文件也在解压的文件夹里面

4、打开项目中你刚刚复制过来的 iconfont.css

将一下代码覆盖本来的代码：
@font-face { font-family: "iconfont"; src: url(data:font/truetype;charset=utf-8;base64, 上一步转换的base64内容 ) format('truetype'); }

5、在APP.vue中的style标签中引入这个iconfont.css

6、使用，同理上面的

<text class="iconfont icon-dianzan"></text>