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>

效果:

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

让ELK在同一个docker网络下通过名字直接访问

1. docker网络 参考https://blog.csdn.net/lihongbao80/article/details/108019773 https://www.freecodecamp.org/chinese/news/how-to-get-a-docker-container-ip-address-explained-with-examples/ 默认网络有三种&#xff0c;分别是 1、bridge模式&#xff0c;–netbridge(…

webpack基础知识五:说说Loader和Plugin的区别?编写Loader,Plugin的思路?

一、区别 前面两节我们有提到Loader与Plugin对应的概念&#xff0c;先来回顾下 loader 是文件加载器&#xff0c;能够加载资源文件&#xff0c;并对这些文件进行一些处理&#xff0c;诸如编译、压缩等&#xff0c;最终一起打包到指定的文件中plugin 赋予了 webpack 各种灵活的…

【nginx】nginx简介

目录 一、背景介绍二、名词解释三、nginx优点3.1 速度快&#xff0c;并发高3.2 配置简单&#xff0c;扩展性强3.3 高可靠性3.4 热部署3.5 成本低、BSD许可证 四、nginx的功能特性4.1 基于http服务4.2 高级http服务4.3 邮件服务 五、nginx常用模块六、nginx的核心组成 一、背景介…

Arduino驱动MQ7模拟一氧化碳气体传感器(气体传感器篇)

目录 1、传感器特性 2、硬件原理图 3、控制器和传感器连线图 4、驱动程序 MQ7气体传感器,可以很灵敏的检测到空气中的一氧化碳气体,与Arduino结合使用,可以制作一氧化碳泄露报警等相关的作品。

Android AccessibilityService研究

AccessibilityService流程分析 AccessibilityService开启方式AccessibilityService 开启原理 AccessibilityService开启方式 . 在Framework里直接添加对应用app 服务component。 loadSetting(stmt, Settings.Secure.ACCESSIBILITY_ENABLED,1); loadSetting(stmt, Settings.Se…

算法leetcode|68. 文本左右对齐(rust重拳出击)

文章目录 68. 文本左右对齐&#xff1a;样例 1&#xff1a;样例 2&#xff1a;样例 3&#xff1a;提示&#xff1a; 分析&#xff1a;题解&#xff1a;rust&#xff1a;go&#xff1a;c&#xff1a;python&#xff1a;java&#xff1a; 68. 文本左右对齐&#xff1a; 给定一个…

Vue3 Script Setup 速查表

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势&#xff0c;学习途径等等。 本文 GitHub https://github.com/qq449245884/xiaozhi 已收录&#xff0c;有一线大厂面试完整考点、资料以及我的系列文章。 快来免费体验ChatGpt plus版本的&#xff0c;我们出的钱 体验地…

从HTTP代理到Socks5代理:网络安全与爬虫的进化之路

一、HTTP代理&#xff1a;简介与特点 HTTP代理是一种最早的代理技术&#xff0c;通过HTTP协议转发网络请求。它能够隐藏用户的真实IP地址&#xff0c;实现匿名访问&#xff0c;为爬虫应用提供了最基本的代理功能。 HTTP代理只支持TCP协议&#xff0c;对于实时数据传输和UDP协议…

【uniapp APP如何优化】

以下是一些可以进行优化的建议&#xff1a; 1. 减少网络请求次数&#xff1a;尽量避免在首页加载时请求大量数据&#xff0c;可以考虑使用分页加载&#xff0c;或者使用下拉刷新和上拉加载更多的方式。 2. 减小图片大小&#xff1a;使用压缩图片的工具&#xff0c;可以尽可能…

ensp常用命令

ensp常用命令 最近在学习华为服务器相关知识&#xff0c;所以避免不了使用ensp做网络拓扑练习&#xff0c;而指令才让我头疼&#xff0c;所以就把自己常用的命令先记录下来。 基础命令 命令缩写含义system-viewsys进入quitq退出sysnamesysname重命名 vlan 命令缩写含义dis…

如何在PCB设计过程中处理好散热

在现代高性能电子设备中&#xff0c;散热是一个常见而重要的问题。正确处理散热问题对于确保电子设备的可靠性、稳定性和寿命至关重要。 下面将介绍在PCB设计过程中处理散热问题的方法和技巧&#xff0c;以帮助大家提高设计质量和性能。 首先&#xff0c;在处理散热问题之前&…

扩散模型概念

定义&#xff1a;一种生成式模型&#xff0c;目前占据主流的扩散模型多基于2020年提出的DDPM&#xff08;去噪扩散概率模型 &#xff09;&#xff0c;扩散模型在2015年提出&#xff0c;但应用不多&#xff0c;2019&#xff0c;2020被改进后开始被广泛应用于图片生成等领域。 主…

Webpack怎么使用?

Webpack 使用 前几篇文章中已经介绍了如何初始化包管理器 package.json 这里不再重复介绍&#xff0c;如有需要请查看 搭建工程化项目。 安装 :::warning 注意 请确保你已经安装了 yarn&#xff0c;如有需要请查看 搭建工程化开发环境。 ::: 通过命令 yarn add webpack web…

Vue系列第八篇:echarts绘制柱状图和折线图

本篇将使用echarts框架进行柱状图和折线图绘制。 目录 1.绘制效果 2.安装echarts 3.前端代码 4.后端代码 1.绘制效果 2.安装echarts // 安装echarts版本4 npm i -D echarts4 3.前端代码 src/api/api.js //业务服务调用接口封装import service from ../service.js //npm …

windows永久关闭更新

不要去services.msc 服务里面关闭windowUpdata了&#xff0c;对win11和部分win10根本不管用&#xff0c;下面在教你一招永久关闭&#xff08;原理不是关闭&#xff0c;只是延长更新时间&#xff0c;时间可以设置百年后&#xff0c;所以和关闭差不多&#xff09; windows图形化…

LeetCode--HOT100题(22)

目录 题目描述&#xff1a;160. 相交链表&#xff08;简单&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;160. 相交链表&#xff08;简单&#xff09; 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表…

【编译原理】六、四则运算支持括号及括号嵌套

1. 前言 在上一篇文章中&#xff0c;我们实现了简单四则运算&#xff0c;现在我们在此基础上&#xff0c;让四则运算支持括号。支持括号嵌套 2. 改写生成式 在简单四则运算的基础上&#xff0c;进行改写&#xff0c;如下所示&#xff1a; compound_expr (basic_expr | bra…

[C++从入门到精通] 9.inline、const、mutable、this和static

&#x1f4e2;博客主页&#xff1a;https://loewen.blog.csdn.net&#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;本文由 丶布布原创&#xff0c;首发于 CSDN&#xff0c;转载注明出处&#x1f649;&#x1f4e2;现…

Ansible专栏目录

我的博客&#xff1a;www.itwk.cc 希望能够给大家带来帮助&#xff01; 文章目录 1、什么是Ansible&#xff1f;Ansible 简介及核心概念详解 &#xff1a;https://blog.csdn.net/qq_34185638/article/details/131079320 2、Ansible Inventory 主机清单的作用、使用方法及示例…

Day 75:通用BP神经网络 (2. 单层实现)

代码&#xff1a; package dl;import java.util.Arrays; import java.util.Random;/*** Ann layer.*/ public class AnnLayer {/*** The number of input.*/int numInput;/*** The number of output.*/int numOutput;/*** The learning rate.*/double learningRate;/*** The m…