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引入阿里图标库
平时项目开发肯定少不了图标的使用,除了自己定制图标库之外,再一个比较不错的就是使用阿里的图标库,这里包含了很多分类的图标,基本上你想用的图标它都有,不仅好看,使用起来也是非常方便的,下面一起来看看吧。
653 0
uniapp引入阿里图标库
|
7月前
|
小程序
uniapp悬浮图标支持拖动支持微信小程序
uniapp悬浮图标支持拖动支持微信小程序
|
小程序 前端开发 程序员
【小程序开发】uniapp引入iconfont图标及使用方式
【小程序开发】uniapp引入iconfont图标及使用方式
594 0
【小程序开发】uniapp引入iconfont图标及使用方式
|
存储 小程序 Java
【笔记11】uniapp点击复制;mysql数据库存储emoji表情;Java 二维码生成;uniapp引入自定义图标
做公司的项目,给微信小程序体验版添加了新的页面,提交测试的时候没有任何效果。上网搜索了解后,知道:若 pages.json 文件发生了变化,尤其是首页路径发生了变化。代码上传成功后,需要在后台手动设置一下首页路径,或者取消体验版,重新生成体验版二维码。
532 0
【笔记11】uniapp点击复制;mysql数据库存储emoji表情;Java 二维码生成;uniapp引入自定义图标
|
6天前
|
小程序
uniapp-微信小程序-上拉和下拉触底刷新
uniapp-微信小程序-上拉和下拉触底刷新
14 0
|
6天前
|
Web App开发 数据采集 移动开发
开发uniapp过程中对app、微信小程序与h5的webview调试
开发uniapp过程中对app、微信小程序与h5的webview调试
16 1
|
6天前
|
JavaScript 小程序 前端开发
小程序;vue;uniapp优缺点(各5条)
小程序;vue;uniapp优缺点(各5条)
17 1
|
6天前
|
移动开发 开发框架 小程序
UniApp与微信小程序介绍及区别
UniApp与微信小程序介绍及区别
32 0
|
6天前
|
缓存 小程序
uniapp读取(获取)缓存中的对象值(微信小程序)
uniapp读取(获取)缓存中的对象值(微信小程序)
16 1
|
6天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的4S店客户管理系统的详细设计和实现
51 4

热门文章

最新文章