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>

效果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/62314.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

HCIP IPV6

一、IPV6升级特点联系和区别 IPV4--->IPV6 1、全球单播地址 ---- IPV4地址下的公有地址 V6下没nat 2、可聚合性&#xff08;IANA组织对全球的地址进行合理分配&#xff09; 3、多宿主---一个物理接口可以同时拥有多个不同网段的IPV6地址&#xff1b;但不同接口不能在…

神码ai伪原创工具【php源码】

大家好&#xff0c;小编为大家解答python炫酷烟花表白源代码的问题。很多人还不知道html代码烟花特效python&#xff0c;现在让我们一起来看看吧&#xff01; 火车头采集ai伪原创插件截图&#xff1a; 目录 前言 环境准备 代码编写 效果展示 前言 Python实现浪漫的烟花特效 现在…

一 关于idea如何在svn进行项目下载并运行成功

安装svn客户端 如图 安装时请选择该选项&#xff08;Will be installed on local hard drive&#xff09;并选择自己想要安装的目录路径 如图 svn安装成功 如图 注意 安装完成后&#xff0c;使用svn进行一次checkout的项目导出完成以上五步时&…

PHP8条件控制语句-PHP8知识详解

我们昨天说了流程控制的结构有顺序结构、选择结构和循环结构。选择结构就是条件结构。 条件控制语句就是对语句中不同条件的值进行判断&#xff0c;进而根据不同的条件执行不同的语句。 在本文中&#xff0c;学习的是if语句、if…else语句、if…elseif语句和switch语句。 1、…

Clash 意外退出后 chrome / google 谷歌 浏览器无法连接互联网

解决方案&#xff1a; 以管理员模式打开命令行&#xff0c;输入&#xff1a;netsh winsock reset &#xff0c;然后重启电脑 如果还不行的话&#xff0c; 在 chromevs中选中 设置>隐私和安全>安全>使用安全 dns> 使用您当前的服务提供商 即可

flask中写一个基础的sqlHelper类

写一个SQLHelper类&#xff1a; from flask_sqlalchemy import SQLAlchemydb SQLAlchemy()class SQLHelper:staticmethoddef add(record):db.session.add(record)return SQLHelper.session_commit()staticmethoddef add_all(records):db.session.add_all(records)return SQLH…

【Spring Cloud 四】Ribbon负载均衡

Ribbon负载均衡 系列文章目录背景一、什么是Ribbon二、为什么要有Ribbon三、使用Ribbon进行负载均衡服务提供者A代码pom文件yml配置文件启动类controller 服务提供者Bpom文件yml配置文件启动类controller 服务消费者pom文件yml文件启动类controller 运行测试 四、Ribbon的负载均…

【Spring Boot】Spring Boot 集成 RocketMQ 实现简单的消息发送和消费

文章目录 前言基本概念消息和主题相关发送普通消息 发送顺序消息RocketMQTemplate的API介绍参考资料&#xff1a; 前言 本文主要有以下内容&#xff1a; 简单消息的发送顺序消息的发送RocketMQTemplate的API介绍 环境搭建&#xff1a; RocketMQ的安装教程&#xff1a;在官网…

js-3:DOM常见的操作有哪些?

1、DOM 文档对象模型&#xff08;DOM&#xff09;是HTML和XML文档的编程接口。 它提供了对文档的结构化的表述&#xff0c;并定义了一种方式&#xff0c;可以使从程序中对该结构进行访问&#xff0c;从而改变文档的结构&#xff0c;样式跟内容。 任何HTML和XML文档都可以用DOM表…

解决object转换Date问题

文章目录 解决object转换Date问题源代码List<Object>转换List<Date>问题 解决object转换Date问题 源代码 /*** 解决object与Date转换问题*/Testpublic void t4() {Object o new Date();String formatDate DateFormatUtils.format((Date) o, com.alibaba.excel.u…

uniapp-疫情应急管理系统学生端

1 疫情资讯展示 <template><view class"container"><uni-section title"自定义卡片内容" type"line"><uni-card title"基础卡片" class"card-box" v-for"(item,index) in epidemicNewsList"…

CDN安全面临的问题及防御架构

CDN安全 SQL注入攻击&#xff08;各开发小组针对密码和权限的管理&#xff0c;和云安全部门的漏洞扫描和渗透测试&#xff09; Web Server的安全&#xff08;运营商和云安全部门或者漏洞纰漏第三方定期发布漏洞报告修复&#xff0c;例如&#xff1a;nginx版本号和nginx resol…

MONGODB ---- Austindatabases 历年文章合集

开头还是介绍一下群&#xff0c;如果感兴趣polardb ,mongodb ,mysql ,postgresql ,redis 等有问题&#xff0c;有需求都可以加群群内有各大数据库行业大咖&#xff0c;CTO&#xff0c;可以解决你的问题。加群请联系 liuaustin3 &#xff0c;在新加的朋友会分到2群&#xff08;共…

react中hooks的理解与使用

一、作用 我们知道react组件有两种写法一种是类组件&#xff0c;另一种是函数组件。而函数组件是无状态组件&#xff0c;如果我们要想改变组件中的状态就无法实现了。为此&#xff0c;在react16.8版本后官方推出hooks&#xff0c;用于函数组件更改状态。 二、常用API 1、use…

websocket+node实现直播(弱鸡版)

心血历程 这部分主要是写在写这些的时候遇到的问题以及换思路的过程&#xff0c;可以之间看正文 在之前我也写过直播功能&#xff0c;并且与websocket相结合实现了直播弹幕。只不过直播是使用的腾讯云的&#xff0c;而不是手写的直播推流拉流&#xff0c;这次又有一个新的项目…

【C# 基础精讲】C# 开发环境搭建(Visual Studio等)

安装C#开发环境是开始学习和使用C#编程的第一步。目前&#xff0c;最常用的C#开发环境是Microsoft Visual Studio&#xff0c;它是一套强大的集成开发环境&#xff08;IDE&#xff09;&#xff0c;提供了丰富的工具和功能&#xff0c;使开发C#应用程序变得更加便捷。以下是安装…

Redis 和 Mysql 如何保证数据一致性

项目场景&#xff1a; 一般情况下&#xff0c;Redis 用来实现应用和数据库之间读操作的缓存层&#xff0c;主要目的是减少数据库 IO&#xff0c;还可以提升数据的 IO 性能。 如下图所示&#xff0c;这是它的整体架构。 当应用程序需要去读取某个数据的时候&#xff0c;首先会先…

Linux性能学习(4.4):网络_TCP三次握手内核参数优化

文章目录 1 三次握手2 参数优化2.1 tcp_syn_retries--->SYN重传次数2.2 tcp_synack_retries--->ACK重传次数2.3 tcp_retries2--->发送数据失败重传次数2.4 TCP keepalive--->保活机制2.5 tcp_max_syn_backlog/somaxconn--->半/全连接队列长度2.6 tcp_syncookies…

离散化的两种实现方式【sort或者map】

离散化 定义 把无限空间中有限的个体映射到有限的空间中去&#xff0c;以此提高算法的时空效率。通俗的说&#xff0c;离散化是在不改变数据相对大小的条件下&#xff0c;对数据进行相应的缩小。 适用范围&#xff1a;数组中元素值域很大&#xff0c;但个数不是很多。 比如将…

PHP8的表达式-PHP8知识详解

表达式是 PHP 最重要的基石。在 PHP8中&#xff0c;几乎所写的任何东西都是一个表达式。简单但却最精确的定义一个表达式的方式就是"任何有值的东西"。 最基本的表达式形式是常量和变量。当键入"$a 5"&#xff0c;即将值"5"分配给变量 $a。&quo…