uniapp使用阿里图标

简介: uniapp使用阿里图标

效果图:

 

前言

随着uniApp的深入人心,我司也陆续做了几个使用uniapp做的移动端跨平台软件,在学习使用的过程中深切的感受到了其功能强大和便捷,今日就如何在uniapp项目中使用阿里字体图标的问题为大家献上我的一点心得,不足之处还望指正。

一、项目准备

在一个项目开始之前,我们要先准备一下即将在过程之中需要使用的阿里字体图标,当然后期也可以增加新的字体图标进来,但是有个

基本原则一定要谨记:

1、一个项目中最好只使用一个iconfont文件,防止unicode码重复引起的图标显示错误;
2、项目的图标最好是只增加不删除,当一个项目使用的阿里图标很多时,维护起来很便捷

记住这些准则,下面开始介绍添加自己喜爱的字体图标。

首先打开阿里字体图标的官方网站https://www.iconfont.cn/

1、挑选自己喜爱的图标并添加至购物车

2、点击右上角的购物车查看已添加的图标

3、将选中图标添加至自己发起的项目或者参与的项目当中,在资源管理我的项目中查看

4、下载至本地(记得下载好之后给文件夹改名字,便于使用)

5、将文件夹导入uniapp项目

温馨提示:在pages同级新建文件夹static中创建common并把下载的图标文件放入

二、使用步骤

1、在mian.js中引入字体资源

2、使用方式

<i style="font-size: 45px; color: #38AF35;" class="iconfont icon-fengxiantishi"></i>

效果:

目录
相关文章
uniapp引入阿里图标库
平时项目开发肯定少不了图标的使用,除了自己定制图标库之外,再一个比较不错的就是使用阿里的图标库,这里包含了很多分类的图标,基本上你想用的图标它都有,不仅好看,使用起来也是非常方便的,下面一起来看看吧。
793 0
uniapp引入阿里图标库
|
5月前
uniapp 添加自定义图标
uniapp 添加自定义图标
197 0
|
小程序
uniapp悬浮图标支持拖动支持微信小程序
uniapp悬浮图标支持拖动支持微信小程序
129 0
|
小程序 前端开发 程序员
【小程序开发】uniapp引入iconfont图标及使用方式
【小程序开发】uniapp引入iconfont图标及使用方式
1035 0
【小程序开发】uniapp引入iconfont图标及使用方式
|
存储 小程序 Java
【笔记11】uniapp点击复制;mysql数据库存储emoji表情;Java 二维码生成;uniapp引入自定义图标
做公司的项目,给微信小程序体验版添加了新的页面,提交测试的时候没有任何效果。上网搜索了解后,知道:若 pages.json 文件发生了变化,尤其是首页路径发生了变化。代码上传成功后,需要在后台手动设置一下首页路径,或者取消体验版,重新生成体验版二维码。
637 0
【笔记11】uniapp点击复制;mysql数据库存储emoji表情;Java 二维码生成;uniapp引入自定义图标
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
136 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
72 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
90 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的武汉市公交路线查询系统的详细设计和实现(源码+lw+部署文档+讲解等)
124 7
|
5月前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的旅游攻略系统的详细设计和实现(源码+lw+部署文档+讲解等)
126 7

相关实验场景

更多