如何在uniapp项目添加iconfont图标

-小C_

已于 2023-06-06 09:17:13 修改

阅读量502

点赞数

分类专栏：小程序文章标签：微信小程序

于 2023-06-05 18:42:28 首次发布

本文链接：https://blog.csdn.net/m0_75107188/article/details/131044566

版权

小程序专栏收录该内容

6 篇文章 1 订阅

订阅专栏

uniapp项目想要添加iconfont图标

首先要有自己的账号，进入阿里巴巴矢量图标库

创建项目或者是进入公司项目

找到图标后，加入项目

点击项目进去，下载文件

在本地项目中static文件夹中新建font文件夹，复制刚才下载的压缩包中的iconfont.css和iconfont.tff文件到font文件夹中

在App.vue中全局引入

页面中直接这样使用即可

<uni-icons type="icon-kaishizhihang" customPrefix="iconfont" size="28" color="#999999"></uni-icons>
//也可以尝试 
<text class="iconfont icon-kaishizhihang"></text>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

-小C_

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何在uniapp项目添加iconfont图标

uniapp项目添加iconfont图标
复制链接

扫一扫

专栏目录

Uniapp 添加Iconfont

he_wen_jian的专栏

03-22

1747

1：创建/font/iconfont.css 在线方式： @font-face { font-family: "iconfont"; /* Project id 3266214 */ src: url('https://at.alicdn.com/t/font_3266852_eypzg2x8bh8.ttf?t=1647920902148') format('truetype'); } 离线方式： @font-face { font-family: "iconfont";

uniapp 用户密码与图标显示隐藏

微风的博客

09-27

865

仅做记录个人查看 <input class="inp huni" :password="!flag" value="" placeholder="请输入密码" /> 输入框 <image @click="flag=!flag" class="img" :src="flag?'../../../static/imgs/user/yan.png':'../../../static/imgs/user/bi-yan.png'" mode=""></image>.

参与评论您还未登录，请先登录后发表或查看评论

在uni-app使用iconfont中的图标

码农键盘上的梦

04-15

2925

1.访问 iconfont-阿里巴巴矢量图标库，注册并登录账号, 2.浏览或搜索所需的图标，将它们添加至购物车或直接创建项目进行管理。 3.完成图标选择后，进入“我的项目”，点击对应项目的“下载”按钮，选择“WebFont”格式下载。下载得到的压缩包通常包含以下文件:

uniapp开发使用uni-icons添加自定义图标

x13459484764的博客

08-03

4002

uniapp开发中，使用uni-icons组件，添加自定义图标（用图标的方式是为了防止图标在大小设置时模糊，以及方便更改图标颜色）

如何在uniapp项目引入阿里图标库的iconfont(线上)

最新发布

it_laowu的博客

05-11

758

小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的

uniapp+editor图标文件+iconfont.ttf

03-10

uniapp editor富文本编辑器的图标文件

uniapp字体图标的使用

12-31

在开发uniapp应用时，使用字体图标是一种...通过以上步骤，你可以在uniapp项目中顺利地使用字体图标，为你的应用增添丰富多彩的视觉元素。在实际开发过程中，可以根据项目需求灵活选择和管理字体图标，提升用户体验。

uniapp小程序tabbar图标

07-25

这个图标集包含了所有必要的选中和非选中状态图标，开发者可以根据自己的需求将它们应用到uniapp项目的`tabbar`配置中。通过合理的配置和设计，可以创建出美观且易用的底部导航栏，提升整体应用的用户体验。

32个uniapp项目源码涵盖商城团购等

05-10

源码列表： IT之家小程序版客户端(使用 Mpvue 开发，兼容 Web)ithome-lite-master.zip mpvue 仿网易严选mpvue-shop-master.zip mpvue-音乐播放器mpvue-music-master.zip...uni-app的markdown富文本编辑器插件uniapp-

uniapp常用图标.zip

01-15

简洁性则是为了确保图标在小尺寸下也能清晰可见。此外，对于无障碍性（Accessibility）的关注也是现代UI设计的重要部分。开发者需要确保即使对于视力障碍的用户，也能通过辅助技术理解图标的含义。这可以通过为...

uniapp使用iconfonts图标不显示以及颜色问题

Mitin_的博客

08-16

8105

1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可。在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，复制完之后粘贴到本地的对应的iconfont.css文件中。颜色的话也可以在iconfont.css文件中设置，如下。在iconfont.css文件中，修改为以下这样的路径。以及图标显示了但是为一个小正方形的问题，同时包括图标颜色不显示的问题。...

在uni.app中引入并在底部导航栏中使用icon字体图标

weixin_46254090的博客

09-27

2001

icon在uni.app中tabbar的用法

uniapp 阿里图库图标引用

qq_41241504的博客

06-30

489

uniapp 阿里图库图标引用

uniapp如何引入iconfont图标库

qq_45018844的博客

10-14

1944

第一步：你得拥有一个uniapp项目第二步点击iconfont官网在首页选好图标，在项目中新建一个css 将上面的1复制在css中，再点开下面这个链接再复制这个，在css中，下面就是css的代码了 @font-face { font-family: 'iconfont'; /* Project id 2859888 */ src: url('//at.alicdn.com/t/font_2859888_csff1a0k5tm.woff2?t=1634008673174') fo

uni-app引入阿里Icon 图标方式（CustomIcon 扩展自定义图标库）

Richardclass的博客

07-07

935

uni-app引入阿里Icon 图标方式（CustomIcon 扩展自定义图标库）

uniapp引入iconfont

qq_37953045的博客

07-27

674

uniapp引入iconfont

uni-app 小程序引入字体图标

qq_18314469的博客

06-04

2431

我的项目引入的是阿里巴巴的图标库。将下载的阿里巴巴图标库中的 iconfont.css 文件，复制到项目的 commoncss文件夹下面，如下所示，可以修改一下文件名：然后修改该文件夹中的内容，由于文件中引用到的其它文件在项目中都不存在，可直接删除掉，只留下 “data” 开头的路径，如下图红线部分：注意：路径最后只剩下一个，这行代码的结尾一定是 “ ; ” (封号，载过坑) ...

uniapp小程序中使用iconfont字体图标

m0_49529959的博客

08-04

1526

1.Uniapp小程序项目的common文件夹下面新建iconfont.css文件，App.vue文件中全局引入样式 2.iconfont官网： https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 2.1 选中iconfont字体图标，添加入库 2.2 添加至新项目，图标管理-我的项目 2.3 可直接复制代码，也可先点击下方新icon来源，生成新代码后再复制，复制到uniapp小程序项目的common下新建的ico

uniapp项目引入iconfont

09-05

通过以上步骤，你就可以成功在uniapp项目中引入iconfont图标了。123 #### 引用[.reference_title] - *1* *3* [UNI-APP引入iconfont的方法]...

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交