uni-fab彩色图标按钮

news2024/11/24 18:56:30

资源已经上传了。大家直接可以引用uni-fab就可以https://download.csdn.net/download/qq_39504612/87216560

1. 下载彩色图标

1.首先,从iconfont官网(iconfont-阿里巴巴矢量图标库)选择自己需要的图标加入项目中,点击下载至本地。
在这里插入图片描述

2.在本地找到下载的压缩包

,并解压,进入解压缩之后的文件,在地址栏中输入cmd打卡控制台(在文件夹内输入cmd可直接将路径定位到当前文件夹)

npm install -g iconfont-tools 安裝插件

然后
iconfont-tools (一直回车)

3. 生成了

在这里插入图片描述

4. 找到这个css 将里面的代码复制

在这里插入图片描述在这里插入图片描述

5. 找到uni-moudles下的 uni-fab

在这里插入图片描述

6.在style标签内添加刚复制的iconfont-weapp-icon.css中的内容

在这里插入图片描述

7. 在38行左右

class=t-icon t-icon-mianxingyumaobi 替換原来的class样式
(t-icon-mianxingyumaobi换为你自己在css的名字)
格式为:(t-icon空格 样式名字)
在这里插入图片描述

8. 注释掉所有box-shadow

在这里插入图片描述

9. 在37行左右将background-color后面换为’background-color’: ‘transparent’,在这里插入图片描述

最终uni-fab样式

在这里插入图片描述

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

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

相关文章

Alibaba Nacos 客户端注册从客户端项目到nacos项目的整体流程核心梳理

客户端篇: 1、NacosAutoServiceRegistration类继承了AbstractAutoServiceRegistration类,AbstractAutoServiceRegistration类实现了ApplicationListener,实现了ApplicationListener接口的类都必须实现一个onApplicationEvent方法,…

CSDN页面左上角出现红色“不安全 | https” ,并且把鼠标放在上面的头像和消息时无法下拉菜单

CSDN页面左上角出现红色“不安全 | https”,如下图: 我不说多了,直接说吧 “不安全 | https”,先点击“不安全”看看: 点击“证书无效”,—>“基本信息” 点击“详细信息” 这三个截图都是有问题…

【元胞自动机】元胞自动机双边教室疏散【含Matlab源码 1208期】

⛄一、元胞自动机简介 1 元胞自动机发展历程 最初的元胞自动机是由冯 诺依曼在 1950 年代为模拟生物 细胞的自我复制而提出的. 但是并未受到学术界重视. 1970 年, 剑桥大学的约翰 何顿 康威设计了一个电脑游戏 “生命游戏” 后, 元胞自动机才吸引了科学家们的注意. 1983 年…

Vue3 | Vue3与Vue2相比的优势、创建项目的方式以及一些常见的Compositioin API

一、Vue3与Vue2相比,有哪些优势呢? 1、性能的提升: 打包大小减少41%初次渲染快55%,更新渲染快133%内存减少54%2、源码的升级 使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现和Tree-Shaking3、新的特性 Composition API&…

[附源码]计算机毕业设计JAVA小型医院药品及门诊管理

[附源码]计算机毕业设计JAVA小型医院药品及门诊管理 项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM …

Vue3 - Pinia 状态管理(环境搭建安装及各属性使用教程)详细使用教程

目录初识 Pinia介绍环境搭建getters 属性actions 属性Pinia 模块化Pinia 解构 storePinia 数据持久化SEO初识 Pinia vue 官方文档:https://cn.vuejs.org/guide/scaling-up/state-management.html#pinia Pinia 官方文档:https://pinia.web3doc.top/ pinia…

hiveSql冷门但好用函数 --持续更新

hiveSql常用函数字符串函数to_jsonjson_tupletranslate日期函数next_day字符串函数 to_json 将STRUCT类型的数据转化为json格式字符串,此处需要另外学习一个named_struct()函数:自定义结构化数据的KVnamed_struct(k1,v1,k2,v2…)示例: select named_s…

吉时利2602A数字源表-安泰测试

吉时利Keithley2602A双通道系统数字电源 Keithley/吉时利2602A数字源表数字源表是吉时利新的I-V源测量仪器,可用作台式I-V特征分析工具或者构成多通道I-V测试系统的组成模块。作为台式仪器使用时,2600A系列仪器提供了一个嵌入式TSP Express软件工具&…

函数定义、this指向、闭包等

1、函数的定义和调用 1.1函数的定义方式 1、自定义函数(命名函数) 2、函数表达式(匿名函数) 3、利用 new Function (‘参数1’, ‘参数2’, ‘函数体’) 1、自定义函数(命名函数) function fn() {}2、函…

微服务框架 SpringCloud微服务架构 6 Nacos 配置管理 6.1 Nacos 实现配置管理

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式,系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 SpringCloud微服务架构 文章目录微服务框架SpringCloud微服务架构6 Nacos 配置管理6.1 Nacos 实现配置管理6.1.1 统一配置管理6.1.2 直接开干…

Chapter9.4:线性系统的状态空间分析与综合(下)

此系列属于胡寿松《自动控制原理题海与考研指导》(第三版)习题精选,仅包含部分经典习题,需要完整版习题答案请自行查找,本系列属于知识点巩固部分,搭配如下几个系列进行学习,可用于期末考试和考研复习。 自动控制原理(…

UG NX二次开发(C#)-CAM-获取所有的加工刀具表单

文章目录 1、前言2、加工模块的刀具2.1 进入加工模板2.2 创建加工刀具3、创建一个UI Styler程序3.1 创建一个UI Styler3.2 保存对话框4、创建GetMachiningToolList工程5、添加代码6、保存工程,生成dll7、配置工程8、测试效果1、前言 UG NX软件最擅长的就是生成加工程序,包括…

Express操作MongoDB

一、Express框架通过Mongoose模块操作MongoDB数据库 1、MongoDB数据库: ​ (1)存放数据的格式:key-value ​ (2)数据库(database) ——- 集合(collection) ——- 文档(document) ​ (3&…

数字逻辑·时序线路设计【原始状态表】

这一篇着重原始状态表 组合线路设计与时序线路设计的区别 组合线路设计方法: 确定输入和输出写真值表写表达式并化简根据题目给出的门或者其他要求进行变换(取反)画电路图 时序线路设计方法: 确定输入和输出,建立…

[Linux]------初识多线程

文章目录前言一、 Linux线程概念什么是线程线程理解证明C线程库二、页表三、线程的优点四、线程缺点五、线程异常六、线程的用途总结前言 本节重点!!! 了解线程概念,理解线程与进程的区别和联系。学会线程控制,线程创…

因子模型套利定价理论APT的应用

本文是Quantitative Methods and Analysis: Pairs Trading此书的读书笔记。 一、APT(套利定价理论)应用于计算投资组合的风险 某个投资组合由两个股票A和B组成,它们的暴露系数向量(exposure vector)分别为和。两个股票在投资组合中的比重为…

Turtlebot2简单控制

遥控 遥控前为了让turtlebot接受命令,需要启动 roslaunch turtlebot_bringup minimal.lauch 键盘操作命令: roslaunch turtlebot_teleop keyboard_teleop.launch 简单脚本控制: 首先输入命令 roslaunch turtlebot_bringup minimal.lau…

WebRTC学习笔记七 pion/webrtc

一、Usage用法 1.使用Go Modules Go Modules are mandatory for using Pion WebRTC. So make sure you set export GO111MODULEon, and explicitly specify /v2 or /v3 when importing. 2.常见示例 example applications contains code samples of common things people bu…

Web3.0带来天翻地覆的变化?全面科普!所谓的Web3.0到底是什么?

Web3.0在2021年尾声突然蹿红,在美国国会的听证会里,一句“我们如何确保web3革命发生在美国”引发了大家对于Web3.0的关注,而后马斯克一篇内容为“有人看过web3.0吗? 我没有找到”的推文,将关于Web3.0的讨论推向了高潮。 甚至于这…

零基础入门JavaWeb——CSS相关知识

一、CSS的作用 SS是用于设置HTML页面标签的样式&#xff0c;用于美化HTML页面。 二、CSS的引入方式 2.1 行内样式 在要设置样式的标签中添加style属性&#xff0c;编写css样式&#xff1b;行内样式仅对当前标签生效。 <div style"border: 1px solid red;width: 10…