uni-fab彩色图标按钮

2023-12-25 09:20
文章标签 彩色 uni 按钮 图标 fab

本文主要是介绍uni-fab彩色图标按钮,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

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样式

在这里插入图片描述

这篇关于uni-fab彩色图标按钮的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/535001

相关文章

macOS无效Launchpad图标轻松删除的4 种实用方法

《macOS无效Launchpad图标轻松删除的4种实用方法》mac中不在appstore上下载的应用经常在删除后它的图标还残留在launchpad中,并且长按图标也不会出现删除符号,下面解决这个问... 在 MACOS 上,Launchpad(也就是「启动台」)是一个便捷的 App 启动工具。但有时候,应

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中,ICO图标是一种常用的图像

Vue中动态权限到按钮的完整实现方案详解

《Vue中动态权限到按钮的完整实现方案详解》这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下... 目录一、数据库设计扩展1.1 修改路由表(routes)1.2 修改角色与路由权限表(role_routes)二、后端接口设计

macOS怎么轻松更换App图标? Mac电脑图标更换指南

《macOS怎么轻松更换App图标?Mac电脑图标更换指南》想要给你的Mac电脑按照自己的喜好来更换App图标?其实非常简单,只需要两步就能搞定,下面我来详细讲解一下... 虽然 MACOS 的个性化定制选项已经「缩水」,不如早期版本那么丰富,www.chinasem.cn但我们仍然可以按照自己的喜好来更换

C# 防止按钮botton重复“点击”的方法

在使用C#的按钮控件的时候,经常我们想如果出现了多次点击的时候只让其在执行的时候只响应一次。这个时候很多人可能会想到使用Enable=false, 但是实际情况是还是会被多次触发,因为C#采用的是消息队列机制,这个时候我们只需要在Enable = true 之前加一句 Application.DoEvents();就能达到防止重复点击的问题。 private void btnGenerateSh

[环境配置]ubuntu20.04安装后wifi有图标但是搜不到热点解决方法

最近刚入手一台主机,暗影精灵8plus电竞主机,安装ubuntu后wifi怎么都搜不到热点,前后重装系统6次才算解决问题。这个心酸历程只有搞技术人才明白。下面介绍我解决过程。 首先主机到手后是个windows10系统,我用无线网连接了一下,可以正常上网,说明主机有无限网卡且正常。然后我就直接开始安装Ubuntu20.04了,安装成功后发现wifi有图标但是搜不到热点,我想是不是无线网卡驱动有没有

PNG透明背景按钮的实现(MFC)

问题描述: 当前要在对话框上添加一个以两个PNG图片作为背景的按钮,PNG图的背景是透明的,按钮也要做出相同的透明效果。并且鼠标不在按钮上时,按钮显示"bg1.png";鼠标移动到按钮上时,按钮显示"bg2.png" 开发环境为VS2010。 解决办法: 使用GDI+库装载PNG图片,并使用MFC Button Control和CMFCButton类结合,调用CMFCButton

CAD 多个页面在一个任务栏图标设置

命令行输入快捷键op或: 下图打对号,确定即可。

龙芯+FreeRTOS+LVGL实战笔记(新)——05部署主按钮

本专栏是笔者另一个专栏《龙芯+RT-Thread+LVGL实战笔记》的姊妹篇,主要的区别在于实时操作系统的不同,章节的安排和任务的推进保持一致,并对源码做了改进和优化,各位可以先到本人主页下去浏览另一专栏的博客列表(目前已撰写36篇,图1所示),再决定是否订阅。此外,也可以前往本人在B站的视频合集(图2所示)观看所有演示视频,合集首个视频链接为: 借助RT-Thread和LVGL

致远个性化之--发起流程页面,去掉【查看流程】按钮

需求 近期在做的项目中,遇到一个需求,想把发起流程页面中的【查看流程】按钮去掉,只让员工预测流程,知道自己的事项流程走向,不让看全局流程图。包含PC端和移动端,以及微协同端。 如下图效果示例: 实现 此需求,只能通过修改页面代码实现。在此不分析实现过程,现把具体实现方式呈现如下,各位如有需求可参照设置。适用版本V9.0,其他版本未进行测试,估计不会有大的差别! PC端 找到文件