mui增加自定义icon图标

已于 2022-06-08 21:42:37 修改
阅读量836 收藏 1
点赞数
分类专栏： webapp 文章标签： webapp
于 2022-06-06 23:27:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44366002/article/details/125155443
版权
本文介绍了如何在mui项目中引入阿里巴巴矢量图标库的自定义图标。首先，从图标库选择图标并下载ttf格式字体文件。接着，将ttf文件和修改过的iconfont.css文件放入mui的css和fonts文件夹。通过修改iconfont.css的-webkit前缀语法，删除-moz部分，完成图标添加。若需修改多个图标，只需重复此过程。
摘要由CSDN通过智能技术生成

1.打开阿里巴巴矢量图标库，选中你想要导入的图标后加入购物车，网页右侧打开购物车，选择"添加至项目"，然后下载至本地。在这里插入图片描述
解压后会得到如下文件，只兼容iOS和Android版本的话，仅需要ttf格式的字体即可，其它字体可以删除；即箭头所指为有用文件，其他可以删除。
在这里插入图片描述
此时只需把这两个文件分别复制到mui工程文件夹中css文件夹和fonts文件夹下，然后修改iconfont.css即可：
在这里插入图片描述

此为下载文件中默认iconfont.css文件的代码：
在这里插入图片描述
仅需保留-webkit前缀语法，-moz前缀部分可以删除。修改后的iconfont.css文件的代码：在这里插入图片描述
初始样式：

最低0.47元/天 解锁文章
啊宇丫
关注
专栏目录
mui 添加自定义图标
授人以渔的博客
06-29 438
步骤一、 1.登录网站(阿里巴巴矢量图图库) 网站：http://www.iconfont.cn/ 2.使用自己的新郎微博登录 3.选择自己喜欢的图标,点击添加购物车 图标管理---》我的项目 输入项目名字，例如“mui-icon-custom” 点击购物车图标，查看当前图标，将图标加入自己的项目 6.选择完毕后,图标管理--->我的项目--->下载至本地 7.解压此文件 步骤二、 ...
mui如何增加自定义icon图标
JustinCai的博客
10-31 3398
mui如何增加自定义icon图标 mui框架遵循极简原则，在icon图标集上也是如此，mui仅集成了原生系统中最常用的图标；其次，mui中的图标并不是图片，而是字体，至于为什么使用字体图标而不是图片，相信web开发者多少都有所了解，简单列举几条： 多个图标字体合成一个字体文件，避免每张图片都需要联网请求； 字体可任意缩放，而图片放大会失真、缩小则浪费像素； 可通过css任意改变
HTML5+规范API-系统通讯录获取功能
记录和分享属于我的“IT”时光
04-25 1936
HTML5+规范API-系统通讯录获取功能
MUI自定义图标
Aenm的博客
06-28 2648
MUI自定义图标 在用HBuilder开发一些手机APP的时候，常常会要用到一些MUI框架里面没有的图标，下面我说一下如何自定义HBuilder的图标。 MUI使用的图标不是图片，而是字体。首先要找到图标源，我用的是阿里巴巴矢量图库。 第一步：注册登录，然后搜索选择自己需要的图标，点击添加入库，你需要的图标就会添加到右上角的购物车了 第二步：点击右上角的购物车，点击下载代码，把图标...
mui自定义图标(添加新图标)
一个神奇美妙的名字
05-04 7718
mui使用的图标并不是图片，并不是在img标签中显示的，而是在span标签中：从阿里图库中选择需要用到的图标，添加入库 点击购物车，你选择的图标都在，添加至项目。 然后会来到这个页面： 下载到本地，我们会看到下载的文件夹目录： iconfont.css和iconfont.ttf是我们项目中需要用到的两个文件。 打开iconfont.css文件如下： @font-face {font-family:...
mui中从阿里巴巴矢量图标库官网制作自定义图标icon
Dome-A
05-17 3028
1.从阿里巴巴图标库选择图标，进入到如下页面2.下载到本地后，得到如下文件，我们用到的文件为红圈的2个文件3.然后修改css文件    原代码为：@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1526523868880'); /* IE9*/ src: url('iconfont.eot?t=1526523868...
MUI实现自定义图标
浪子四方
09-03 1275
引言 在日常生活中，我们对图的感知能力总要强于对字的感知能力，所以在开发过程中适当的在应用里添加一些小巧又漂亮的图标是很有必要的，这可以轻轻松松的提高一大截的用户体验。笔者喜欢用MUI来做混合开发，可是在使用的过程中发现MUI自带的小图标并不能满足日常的开发，所以留下此笔记希望能帮助到遇到同样问题的小伙伴们。 MUI自带的图标 传送门：https://dev.dcloud.net.cn...
mui自定义图标
qq_38026437的博客
02-18 701
研究了一下自定义图标，不仅仅可以在h5里面用，还可以在小程序或者别的开发环境里面用。 首先找到图标源，我自己找的是阿里巴巴矢量图库。 将用到的图标添加入库，就是购物测的图标   打开库存 直接点击下载代码 最后解压下载的文件就会得到需要的数据 然后再编辑器中打开iconfont.css 文件 可以根据选择将需要的文件放到同目录的css下 理论上只要一个iconfo...
mui3.4框架文字图标库
11-06
此版本是3.4，亲测有效，主要解决密码眼睛显示成方块的问题
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...
Mui 引入阿里图标 （如何增加自定义icon图标）
程序猿小白的博客
02-28 1334
1、官网教程：https://ask.dcloud.net.cn/article/128 2、打开阿里图标官网，添加图标至购物车，下载代码（https://www.iconfont.cn/） 4、解压 压缩包，提取 iconfont.css 和 iconfont.ttf 两个文件。 5、把iconfont.tff 放到项目目录 fonts 里边，修改iconfont.css。 ...
MUI项目中使用阿里巴巴矢量图标库（保姆篇）
m0_52334927的博客
10-19 1485
话不多说,直接进入主题. 一、要在MUI项目中使用阿里图标库， 就得先进入阿里图标库的官网 这里是官网网址: https://www.iconfont.cn/ 下图是首页的样子 二、使用阿里图标的方法有很多种,，这里就说一下我使用的这种 1.在搜索框中输入关键字，然后找到自己喜欢的图标，然后鼠标移入到图标上方，就会出现这三个选项，在这里我们选择添加入库，如下图所示 这个时候右上角的购物车图标就有了反应，如下图所示 这个时候可以继续寻找别的自己喜欢的图标，都使用添加入库这种方式，这种方式类似于淘宝中的购
mui增加icon彩色图标
ChibiMarukoChan的博客
09-11 2632
下载阿里巴巴矢量图标操作见上一篇文章哦 https://blog.csdn.net/ChibiMarukoChan/article/details/82588849 第一步：引入iconfont.js <script src="js/iconfont.js"></script> 第二步：在页面修改icon的样式，如下： <style> .icon ...
MUI引入自定义的图标的实现步骤----以引入iconfont的图标为例
Dreamer_Ji的博客
07-25 807
1.在搜索框中输入所想要的图标 2.点击加入购物车 3.点击右上角的购物车，点击添加至项目 4.选择所想要的类型，并下载到本地。 5.打开下载的文件，将这两个文件分别复制到自己的项目中的mui中的css和fonts文件夹中。 6.切记这个是重点的修改部分！！！记住打开iconfont文件，打开这个链接(https://ask.dcloud.net.cn/article/128) 记住只复制以下截图的内容并粘贴到打开的iconfont文件中，其他的内容切记不要进行修改。 7.在项目中导入引入样式
mui汉字图标_mui如何增加自定义icon图标
weixin_39895684的博客
12-21 308
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`引用，以避免内存泄漏。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值