在Uniapp中实现在线使用iconfont的图标

news2025/1/26 15:37:13

icanfont官网

iconfont官网:iconfont-阿里巴巴矢量图标库

在自己建的项目下:点击  Font Class 可以看到下面的在线  css文件

  1. <style> 标签中,使用 @import 指令来引入在线的 CSS 文件。例如:

<style>
      @import url('//at.alicdn.com/t/c/font_4137720_b874rv89kze.css');
</style>

    确保替换代码中的 URL 为实际的在线 CSS 文件的链接。 

   2.在需要使用 Iconfont 图标的地方,例如模板中,使用对应的类名来显示图标。

<template>
   <text class="iconfont icon-图标名称"></text>
</template>

     将 icon-图标名称 替换为实际需要使用的图标名称。您可以在 Iconfont 图标库中选择合适的图标,并查找对应的图标名称。

3.重新编译运行 UniApp 项目,即可在您的应用程序中成功使用在线的 CSS 文件和 Iconfont 图标。

请注意使用在线 CSS 文件的链接时需要确保网络可访问,并且要使用正确的 CSS 文件链接地址。

例如:

在相应的.vue文件中:

先:

然后:

 运行后就可以了:

 

老师域名:huruqing.cn:3008

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

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

相关文章

西安石油大学期末考试C++真题解析

1、一、类型、返回值类型 二、参数表、函数重载 2、一、实例化 二、实例化的类型或类类是对象的蓝图&#xff0c;对象是类的实例化 3、const 4、一个 两个 5、一、公有继承 二、私有继承、保护继承 6、抽象类、实例化对象 7、函数模板、类模板 8、try、catch、throw 9、…

springboot 统一日志 链路跟踪 dubbo3链路 springboot log-starter 设计和实现- 统一日志和链路跟踪 管理、设计和实现

文章目录 1、目标2、源代码3、实现逻辑操作参数定义日志拦截器本地服务日志拦截调用微服务模块的日志保存接口继承日志工具类链路跟踪自实现 4、 logback.xml配置5、测试类测试http请求文件测试接口层 外传 springboot 统一日志 链路跟踪 dubbo3链路 springboot log-starter 设…

Springboot 定时任务,分布式下幂等性如何解决

一、概述&#xff1a; 在分布式环境下&#xff0c;定时任务的幂等性问题需要考虑多个节点之间的数据一致性和事务处理。 一种解决方法是使用分布式锁来保证同一时间只有一个节点能够执行该任务。具体实现可以使用Redis或Zookeeper等分布式协调工具提供的分布式锁功能。 另一…

CC2530 定时器配置步骤

第一章 CC2530时钟源 (1)时钟源 1、内部RC震荡器(32KHz、16MHz) 2、外部石英晶振(32.768KHz、32MHz) 注意:外部石英晶振比较稳定,在无线收发中采用外部石英晶振 (2)时钟源的切换 用于判断时钟源是否切换成功 第二章 定时/技术器的基本原理 定时/计数器,是一种…

(小程序)uniapp调接口完整流程

(小程序)uniapp调接口完整流程 代码&#xff1a; <script lang"ts" setup>import { ref } from "vue"; const form ref({searchVal: "", });//搜索const searchClick () > {console.log(form.value.searchVal)let data {text: form…

【C#】并行编程实战:实现数据并行(2)

本章继续学习实现数据并行&#xff0c;本文主要介绍任务并行度和自定义分区策略相关内容。 本教程对应学习工程&#xff1a;魔术师Dix / HandsOnParallelProgramming GitCode 2、任务并行度 数据并行设计在系统的多个内核上以并行方式运行循环所带来的的优势&#xff…

嵌入式系统:连接物理世界与数字世界的桥梁

目录 导语&#xff1a; 一. 什么是嵌入式系统&#xff1f; 二. 嵌入式系统的应用领域 三. 嵌入式系统的未来发展趋势 导语&#xff1a; 在当今数字时代&#xff0c;我们离不开各类智能设备的便利&#xff0c;它们在我们的生活中起着至关重要的作用。而这些设备中的关键技术…

基于Java+Swing+Mysql项目信息管理系统

基于JavaSwingMysql项目信息管理系统 一、系统介绍二、功能展示1.主页2.新增项目信息3.删除项目信息 三、数据库四、其他系统实现五、获取源码 一、系统介绍 该系统实现了查看项目列表、新增项目信息、删除项目信息 运行环境&#xff1a;eclipse、idea、jdk1.8 二、功能展示…

2023-最新-发布java工具包到 maven 中央仓库,不踩坑

说明 要想将自己的java工具提交到maven中央仓库并公开&#xff0c;但是maven中央仓库是不允许我们直接上传jar包到它上面的&#xff0c;因此我们只能将jar包发布到它指定的第三方maven仓库&#xff0c;然后这个仓库再将jar包同步到中央仓库。而sonatype的OSSRH仓库就是被认可的…

C++ day42

1、思维导图 2、 #include <iostream> using namespace std;class Person { private:int age;int *p; public://无参构造Person():p(new int(89)){age 18;}//有参构造Person(int age,int num){this->age age;this->pnew int(num);}//拷贝构造函数Person(Person …

MKS SERVO4257D 闭环步进电机_系列11 STM32_脉冲和串口例程

第1部分 产品介绍 MKS SERVO 28D/35D/42D/57D 系列闭环步进电机是创客基地为满足市场需求而自主研发的一款产品。具备脉冲接口和RS485/CAN串行接口&#xff0c;支持MODBUS-RTU通讯协议&#xff0c;内置高效FOC矢量算法&#xff0c;采用高精度编码器&#xff0c;通过位置反馈&a…

【java】线程池简介

线程池简介 一、什么是线程池 线程池是一种利用池化技术思想来实现的线程管理技术&#xff0c;主要是为了复用线程、便利地管理线程和任务、并将线程的创建和任务的执行解耦开来。我们可以创建线程池来复用已经创建的线程来降低频繁创建和销毁线程所带来的资源消耗。 二、线…

通过zOffice SDK实现灵活的数据统计

我们通过zOffice收集的业务数据&#xff0c;如何进行分析统计呢&#xff1f;或许我们会想到数据透视表或者筛选的方式&#xff0c;这当然可以&#xff0c;但是在某些场景下&#xff0c;通过透视表统计有一定的难度&#xff0c;不够灵活&#xff0c;而zOffice SDK给我们提供了丰…

使用autossh实现内网穿刺

前言 需要在客户公司部署一套系统&#xff0c;要求是能公网访问&#xff0c;但是客户那边没有公网IP。所以打算打算使用autossh实现内网穿刺。 准备 硬件&#xff1a; 我需要一台有独立ip的公网服务器82.82.82.82&#xff08;充当穿刺服务器&#xff09;&#xff0c;一台能…

EasyExcel时间处理时的bug,希望阿里不要不识好歹,尽快修复这个bug。

一、情况描述 我使用阿里的EasyExcel进行数据导入&#xff0c;但是我发现它录入的时间和表格上的数据不一样。Excel中录入的时间是7:30:00和21:20:00&#xff0c;但是实际读取的数据是7:30:00 上午&#xff0c;9&#xff1a;20&#xff1a;00 下午&#xff0c;导致我数据录入失…

【脚本工具】Python在MySQL批量造测试数据

测试过程中经常需要批量造一批数据&#xff0c;主要通过fake库来造测试数据&#xff0c;支持多国语言&#xff0c;注意使用的时候&#xff0c;各国具体情况 一、安装Faker 1、官方下载安装&#xff1a; URL&#xff1a;https://pypi.org/project/Faker/ 2、通过pip命令安装 …

5、Mysql事务原理

一、概述 事务&#xff1a;一组操作要么全部成功&#xff0c;要么全部失败&#xff0c;目的是为了保证数据最终的一致性。 数据库一般都会并发执行多个事务&#xff0c;多个事务可能会并发的对相同的一批数据进行增删改查操作&#xff0c;可能就会导致我们说的脏写、脏读、不可…

群辉助手Synology Assistant使用教程

下载 百度网盘链接直接下载即可 链接&#xff1a;https://pan.baidu.com/s/1XlQEcTCqBTsOgp-761jdOg?pwd5vyf 提取码&#xff1a;5vyf --来自百度网盘超级会员V5的分享 安装 直接双击安装&#xff0c;等待安装完成 能搜索到上图应用说明安装成功 使用 点击搜索按钮&…

浅谈餐饮业油烟在线监控系统的设计与研究

贾丽丽 安科瑞电气股份有限公司 上海嘉定 201801 摘要&#xff1a;现阶段餐饮行业发展十分迅速&#xff0c;为了更好地提升餐饮油烟的监控力度&#xff0c;强化餐饮业油烟在线监控系统的设计成为重中之重。油烟在线监控系统的强化可以降低油烟的排放量&#xff0c;同时在排烟的…

【赠书】算力经济概念提出者的倾力之作,深刻诠释超级计算的未来!

目录 1.内容简介2.读者受众3.图书目录 如果说蒸汽机是工业革命的引擎&#xff0c;发电机是电气时代的引擎&#xff0c;那么计算机就是数字信息时代的引擎&#xff0c;而超级计算机是引领科学计算创新、攀登新高峰的引擎。 现在&#xff0c;公有云的发展如火如荼&#xff0c;云…