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.hqwc.cn/news/55744.html

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

相关文章

triangles parallel lines

三角形与平行线 如何把现实问题或者抽象问题图形化呢。 梯形面积&#xff1a;四边形面积是如何从三角形面积转换而来的呢&#xff0c;数学里面作图其实蛮重要的&#xff0c;作图的好坏关系到是否能够更加直观明了展现关系&#xff0c;例如为什么有时候三角形&#xff0c;梯形要…

LNMP及论坛搭建(第一个访问,单节点)

LNMP&#xff1a;目前成熟的一个企业网站的应用模式之一&#xff0c;指的是一套协同工作的系统和相关软件 能够提供静态页面服务&#xff0c;也可以提供动态web服务&#xff0c;LNMP是缩写 L&#xff1a;指的是Linux操作系统。 N&#xff1a;指的是nginx&#xff0c;nginx提…

react icon ant简单使用

refer&#xff1a; 文字提示 Tooltip - Ant Design 1.首先保证已经引入了Ant 2.在组件&#xff08;页面&#xff09;引入tooltip import { Form, Tooltip } from antd; 3.在合适的位置使用tooltip&#xff1a; <span>寿命 <Tooltip title"这是寿命的说明&quo…

Vue系列第七篇:Element UI之el-main,el-table,el-dialog,el-pagination,el-breadcrumb等控件使用

本篇实现主页面功能&#xff0c;包括主页面排版布局&#xff0c;学生管理模块实现&#xff0c;后台接口实现等功能。 目录 1.运行效果 1.1登录页面 1.2主页面 1.3学生管理 - 信息列表 1.4学生管理 - 信息管理 1.5学生管理 - 作业列表 1.6学生管理 - 作业管理 2.前端代码…

并查集练习 — 岛屿问题(二)

题目&#xff1a; 同样是岛的问题&#xff0c;但是参数有所变化&#xff0c;一共3个参数&#xff0c;m、n、int[][] position。根据position&#xff0c;求出每一步的岛屿的数量。 代表的意思是&#xff1a;m * n是二维数组的行和列&#xff0c;通过 m * n可以构建一个值都为0的…

gateway过滤器没生效,特殊原因

看这边文章的前提&#xff0c;你要会gateway&#xff0c;知道过滤器怎么配置&#xff1f; 直接来看过滤器&#xff0c;局部过滤器 再来看配置 请求路径 http://127.0.0.1:8080/appframework/services/catalog/catalogSpecials.json?pageindex1&pagesize10&pkidd98…

【雕爷学编程】MicroPython动手做(28)——物联网之Yeelight 3

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

微软研究院展示Project Rumi项目;参数高效微调(PEFT)

&#x1f989; AI新闻 &#x1f680; 微软研究院展示Project Rumi项目&#xff0c;通过多模态方法增强人工智能理解能力 摘要&#xff1a;微软研究院展示了Project Rumi项目&#xff0c;该项目通过结合文本、音频和视频数据&#xff0c;并采用多模态副语言提示的方法&#xf…

医疗器械研发中的可用性工程实践(一)

致读者&#xff1a;以前看《楚门的世界》&#xff0c;《蝴蝶效应》&#xff0c;《肖申克的救赎》&#xff0c;《教父》&#xff0c;《横道世之介》&#xff0c;《老友记》&#xff0c;一个人的一生匆匆。作为平凡人就是历史大河中的浪花&#xff0c;顺势而为&#xff0c;起起伏…

java-hashcode,equals,getclass

如果隐式和显式参数不属于同一个类&#xff0c;对于equals函数&#xff0c;有些采用instanceof方法&#xff0c;这回忽略子类的情况&#xff1a; instanceof是Java中的一个运算符&#xff0c;用于判断一个对象是否是某个类的实例或者是其子类的实例。它的语法是&#xff1a;对象…

基于IP地址的目的地址转换

基本需求 由于来自INTERNET的对政府、企业的网络攻击日益频繁&#xff0c;因此需要对内网中向外网提供访问服务的关键设备进行有效保护。采用目的地址NAT可以有效地将内部网络地址对外隐藏。 图中&#xff1a;公网Internet用户需要通过防火墙访问WEB服务器&#xff0c;为了隐藏…

AI一键生成短视频

AI一键生成推文短视频 阅读时长&#xff1a;10分钟 本文内容&#xff1a; 结合开源AI&#xff0c;一键生成短视频发布到常见的某音&#xff0c;某手平台&#xff0c;狠狠赚一笔 前置知识&#xff1a; 1.基本的 python 编程知识 2.chatGPT 使用过 3.stable diffution 使用过 成果…