mui自定义图标

最新推荐文章于 2024-08-07 13:36:44 发布
最新推荐文章于 2024-08-07 13:36:44 发布
阅读量1.8w 收藏 9
点赞数 2
分类专栏： web 文章标签： mui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kanglovejava/article/details/53619329
版权
本文介绍了如何在项目中使用MUI自定义图标。首先从阿里图库选择图标并添加到项目，然后下载iconfont.css和iconfont.ttf文件。接着修改iconfont.css中的字体路径，确保与ttf文件路径匹配，并在项目中引入iconfont.css。最后展示了在datagrid中应用自定义图标的方法，但指出该方法在IE浏览器下可能不兼容。
摘要由CSDN通过智能技术生成

mui使用的图标并不是图片，并不是在img标签中显示的，而是在span标签中：

<span class="mui-icon iconfont icon-chuguofuwu">

从阿里图库中选择需要用到的图标，添加入库
这里写图片描述

点击购物车，你选择的图标都在，添加至项目。
这里写图片描述

然后会来到这个页面：
这里写图片描述
下载到本地，我们会看到下载的文件夹目录：

最低0.47元/天 解锁文章
李帅康
关注
专栏目录
MUI实现自定义图标
浪子四方
09-03 1272
引言 在日常生活中，我们对图的感知能力总要强于对字的感知能力，所以在开发过程中适当的在应用里添加一些小巧又漂亮的图标是很有必要的，这可以轻轻松松的提高一大截的用户体验。笔者喜欢用MUI来做混合开发，可是在使用的过程中发现MUI自带的小图标并不能满足日常的开发，所以留下此笔记希望能帮助到遇到同样问题的小伙伴们。 MUI自带的图标 传送门：https://dev.dcloud.net.cn...
MUI自定义图标
Aenm的博客
06-28 2643
MUI自定义图标 在用HBuilder开发一些手机APP的时候，常常会要用到一些MUI框架里面没有的图标，下面我说一下如何自定义HBuilder的图标。 MUI使用的图标不是图片，而是字体。首先要找到图标源，我用的是阿里巴巴矢量图库。 第一步：注册登录，然后搜索选择自己需要的图标，点击添加入库，你需要的图标就会添加到右上角的购物车了 第二步：点击右上角的购物车，点击下载代码，把图标...
Mui官方文档学习基础UI组件
2302_80695016的博客
08-07 251
官方文档地址
mui app自定义图标
工控先生
09-12 5299
Mui使用的图标不是单纯的图片方式，在这里我们从图标的选择、下载、引用来说明一下： 1、先打开阿里巴巴矢量图标库 http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.1 可以通过上述的查询框，查找需要使用到的图标，然后添加到库 再单击右上角的下面库图标 单击上述的下载代码
HTML5+规范API-系统通讯录获取功能
记录和分享属于我的“IT”时光
04-25 1929
HTML5+规范API-系统通讯录获取功能
mui 添加自定义图标
授人以渔的博客
06-29 435
步骤一、 1.登录网站(阿里巴巴矢量图图库) 网站：http://www.iconfont.cn/ 2.使用自己的新郎微博登录 3.选择自己喜欢的图标,点击添加购物车 图标管理---》我的项目 输入项目名字，例如“mui-icon-custom” 点击购物车图标，查看当前图标，将图标加入自己的项目 6.选择完毕后,图标管理--->我的项目--->下载至本地 7.解压此文件 步骤二、 ...
mui增加自定义icon图标
啊宇丫
06-06 831
mui增加自定义icon图标
mui 自定义图标方法
qq_35919264的博客
07-24 312
mui中使用的图标是字体而不是图片 可以使用阿里巴巴矢量图标官网：http://iconfont.cn/ 第一步：注册登录，选择自己喜欢的图标，点击，会添加到右上角的购物车 第二步：点击购物车，选择添加至项目，输入项目名称例如“iconfont”，点击“存储”按钮后，会跳转到我发起的项目，选择“下载至本地” 修改iconfont.css： @font-face {font-family: "i...
mui自定义图标(添加新图标)
一个神奇美妙的名字
05-04 7716
mui使用的图标并不是图片，并不是在img标签中显示的，而是在span标签中：从阿里图库中选择需要用到的图标，添加入库 点击购物车，你选择的图标都在，添加至项目。 然后会来到这个页面： 下载到本地，我们会看到下载的文件夹目录： iconfont.css和iconfont.ttf是我们项目中需要用到的两个文件。 打开iconfont.css文件如下： @font-face {font-family:...
mui3.4框架文字图标库
11-06
此版本是3.4，亲测有效，主要解决密码眼睛显示成方块的问题
muiapp开发07：自定义图标
m1m2m3mmm的博客
01-26 1057
图标下载到配置流程梳理
mui导入自定义图标
boKing_CSDN的博客
09-23 461
第一步：从阿里巴巴矢量图标库取得自定义图标 1.1 进入阿里巴巴矢量图标库https://www.iconfont.cn，用户登录，找到需要的图标点击 添加入库 1.2 点击添加至项目，然后下载 ；或者之间点击下载； 第二步：处理下载好的图标文件 2.1 下载下来的是压缩包文件，直接解压，得到如下文件目录 2.2 打开iconfont.css文件，修改一些代码 注意这里添加路径时是两点不...
mui增加自定义图标
肖肖肖丽珠的博客
05-06 448
参考：http://ask.dcloud.net.cn/article/128 下面是注册下载后的文件 在编辑器中，要把ttf文件和iconfont.css的文件当进去 iconfont.css的内容修改一下：注意下面标红的地方： 下面是html的内容：
mui icon各个代码图标样式
热门推荐
weixin_43893363的博客
02-13 1万+
：mui-icon-arrowdown ：mui-icon-arrowleft ：mui-icon-arrowright ：mui-icon-arrowthindown ：mui-icon-arrowthinleft ：mui-icon-arrowthinright ：mui-icon mui-icon-arrowthinup ：mui-icon-arrowup ：mui-icon-back ：m...
html5 mui小图标,HTML5+DCloud--MUI--自定义tabbar图标
weixin_32887779的博客
06-10 181
官方链接：http://ask.dcloud.net.cn/article/128额，中英文字母打错！！！坑了一个多小时，默默的蹲在角落里/(ㄒoㄒ)/~~读者谨记！！！！！！！！！！！！1、进入 ：http://iconfont.cn/ 把你选好的图标放入购物车，之后点击“存储为项目”，输入项目名字，随意写，点击“存储”按钮后，会跳转到项目管理页面，2、点击“下载到本地”按钮，会将合并后的...
mui图标不见了？？
wugezi的博客
08-22 320
直接上图就一目了然了
mui的图标怎么写入html,mui如何增加自定义icon图标
weixin_32235191的博客
06-03 313
mui如何增加自定义icon图标===mui框架遵循极简原则，在icon图标集上也是如此，mui仅集成了原生系统中最常用的图标；其次，mui中的图标并不是图片，而是字体，至于为什么使用字体图标而不是图片，相信web开发者多少都有所了解，简单列举几条：多个图标字体合成一个字体文件，避免每张图片都需要联网请求；字体可任意缩放，而图片放大会失真、缩小则浪费像素；可通过css任意改变颜色、设置阴影及透明效...
MUI如何自定义轮播图的样式?
最新发布
09-10
在MUI中，自定义轮播图（Carousel）的样式通常涉及到对核心组件以及其容器进行CSS定制。以下是一些关键步骤： 1. **UseStyles或theme**: 首先，你可以使用`@material-ui/styles`提供的`makeStyles`或直接从全局主题中获取样式。这让你可以在函数组件中创建受控的样式对象。 ```jsx import { makeStyles } from '@material-ui/styles'; const useStyles = makeStyles((theme) => ({ carouselContainer: { // 自定义carousel容器样式 }, slide: { // 自定义单张幻灯片样式 }, })); ``` 2. **CSS类名**: 在组件内部，应用这些样式到对应的元素。`Carousel`组件的每个`Slide`都有一个默认的`slide`类，你可以覆盖它。 ```jsx function MyCarousel() { const classes = useStyles(); return ( <div className={classes.carouselContainer}> {/* 每个slide都应用了slide类 */} <Slide className={classes.slide}>...</Slide> </div> ); } ``` 3. **响应式设计**: 如果需要根据设备大小调整样式，可以利用CSS媒体查询或者`@media`规则。 4. **触摸优化**: 可能还需要针对移动设备添加特定的触摸事件处理器，比如触摸开始、结束和移动，来改变滚动方向。 5. **动画效果**: 如果你想改变过渡动画，可以修改`Transition`组件内的`transition`或`timeout`属性。 记得在组件销毁时清理使用`useStyles`返回的`classes`引用，以避免内存泄漏。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值