mui增加自定义icon图标

已于 2022-06-08 21:42:37 修改
阅读量810 收藏 1
点赞数
分类专栏： webapp 文章标签： webapp
于 2022-06-06 23:27:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44366002/article/details/125155443
版权

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

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

最低0.47元/天 解锁文章
啊宇丫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mui3.4框架文字图标库
11-06
此版本是3.4，亲测有效，主要解决密码眼睛显示成方块的问题
mui如何增加自定义icon图标
JustinCai的博客
10-31 3334
mui如何增加自定义icon图标 mui框架遵循极简原则，在icon图标集上也是如此，mui仅集成了原生系统中最常用的图标；其次，mui中的图标并不是图片，而是字体，至于为什么使用字体图标而不是图片，相信web开发者多少都有所了解，简单列举几条： 多个图标字体合成一个字体文件，避免每张图片都需要联网请求； 字体可任意缩放，而图片放大会失真、缩小则浪费像素； 可通过css任意改变
MUI自定义图标
Aenm的博客
06-28 2580
MUI自定义图标 在用HBuilder开发一些手机APP的时候，常常会要用到一些MUI框架里面没有的图标，下面我说一下如何自定义HBuilder的图标。 MUI使用的图标不是图片，而是字体。首先要找到图标源，我用的是阿里巴巴矢量图库。 第一步：注册登录，然后搜索选择自己需要的图标，点击添加入库，你需要的图标就会添加到右上角的购物车了 第二步：点击右上角的购物车，点击下载代码，把图标...
HTML5+规范API-系统通讯录获取功能
记录和分享属于我的“IT”时光
04-25 1824
HTML5+规范API-系统通讯录获取功能
MUI 自定义万年历 用于考勤
07-09
利用优秀的MUI框架，制作了一个轻量、原生UI、流畅体验的万年历，用于展示考勤情况。希望有需要的同学可以用到，最后祝愿大家可以快速成为大佬。
mui自带图标.rar
10-12
MUI中的自带图标，根据版本自己用吧。
mui ---- 搜索列表自定义
11-03
1，直接添加引用indexed-list.js和indexed-list.css； 2，修改indexed-list.js的self.el.bar.offsetHeight - 40为 self.el.bar.offsetHeight - self.el.search.offsetHeight 此处的作用是防止你将搜索框去掉，导致...
自定义MUI按钮被按下去时的颜色
05-12
mui的按钮被按下时的颜色主要是通过修改样式来实现的，即未被按下时是一种颜色，被按下时是另一种颜色。
mui中从阿里巴巴矢量图标库官网制作自定义图标icon
Dome-A
05-17 2986
1.从阿里巴巴图标库选择图标，进入到如下页面2.下载到本地后，得到如下文件，我们用到的文件为红圈的2个文件3.然后修改css文件    原代码为：@font-face {font-family: "iconfont"; src: url('iconfont.eot?t=1526523868880'); /* IE9*/ src: url('iconfont.eot?t=1526523868...
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 1288
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 1416
话不多说,直接进入主题. 一、要在MUI项目中使用阿里图标库， 就得先进入阿里图标库的官网 这里是官网网址: https://www.iconfont.cn/ 下图是首页的样子 二、使用阿里图标的方法有很多种,，这里就说一下我使用的这种 1.在搜索框中输入关键字，然后找到自己喜欢的图标，然后鼠标移入到图标上方，就会出现这三个选项，在这里我们选择添加入库，如下图所示 这个时候右上角的购物车图标就有了反应，如下图所示 这个时候可以继续寻找别的自己喜欢的图标，都使用添加入库这种方式，这种方式类似于淘宝中的购
MUI实现自定义图标
浪子四方
09-03 1221
引言 在日常生活中，我们对图的感知能力总要强于对字的感知能力，所以在开发过程中适当的在应用里添加一些小巧又漂亮的图标是很有必要的，这可以轻轻松松的提高一大截的用户体验。笔者喜欢用MUI来做混合开发，可是在使用的过程中发现MUI自带的小图标并不能满足日常的开发，所以留下此笔记希望能帮助到遇到同样问题的小伙伴们。 MUI自带的图标 传送门：https://dev.dcloud.net.cn...
mui增加icon彩色图标
ChibiMarukoChan的博客
09-11 2597
下载阿里巴巴矢量图标操作见上一篇文章哦 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 742
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 298
mui如何增加自定义icon图标===mui框架遵循极简原则，在icon图标集上也是如此，mui仅集成了原生系统中最常用的图标；其次，mui中的图标并不是图片，而是字体，至于为什么使用字体图标而不是图片，相信web开发者多少都有所了解，简单列举几条：多个图标字体合成一个字体文件，避免每张图片都需要联网请求；字体可任意缩放，而图片放大会失真、缩小则浪费像素；可通过css任意改变颜色、设置阴影及透明效...
<template> <nav class="mui-bar mui-bar-tab"> <router-link class="mui-tab-item-lib" :to="{name:'home'}"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span> </router-link> <router-link class="mui-tab-item-lib" :to="{name:'category'}"> <span class="mui-icon mui-icon-personadd"></span> <span class="mui-tab-label">分类</span> </router-link> <router-link class="mui-tab-item-lib" :to="{name:'shopcart'}"> <span class="mui-icon mui-icon-extra mui-icon-extra-cart"> <span class="mui-badge">2</span> </span> <span class="mui-tab-label">购物车</span> </router-link> <router-link class="mui-tab-item-lib" :to="{name:'user'}"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">我的</span> </router-link> </nav> </template>
最新发布
06-09
这是一个 Vue.js 的组件...这个导航栏使用了 MUI 框架的样式，并且在购物车链接中展示了一个徽章，表示当前购物车中有 2 件商品。每个链接使用了 Vue Router 的组件，并通过v-bind指令动态绑定了链接的目标路由地址。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值