mui icon各个代码图标样式

最新推荐文章于 2024-05-12 06:18:50 发布
最新推荐文章于 2024-05-12 06:18:50 发布
阅读量1w 收藏 38
点赞数 7
分类专栏： 笔记 文章标签： web app android ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43893363/article/details/104292938
版权

：mui-icon-arrowdown：：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
在这里插入图片描述：mui-icon-bars
在这里插入图片描述：mui-icon-camera
在这里插入图片描述：mui-icon-chat
在这里插入图片描述：mui-icon-chatboxes
在这里插入图片描述：mui-icon-chatboxes-filled
在这里插入图片描述：mui-icon-chatbubble
在这里插入图片描述：mui-icon-chatbubble-filled
在这里插入图片描述：mui-icon-checkbox
在这里插入图片描述：mui-icon-checkbox-filled
在这里插入图片描述：mui-icon-checkmarkempty
在这里插入图片描述：mui-icon-circle
在这里插入图片描述：mui-icon-circle-filled
在这里插入图片描述：mui-icon-clear
在这里插入图片描述：mui-icon-close
在这里插入图片描述：mui-icon-close-filled
在这里插入图片描述：mui-icon-closeempty
在这里插入图片描述：mui-icon-compose
在这里插入图片描述：mui-icon-contact
在这里插入图片描述：mui-icon-contact-filled
在这里插入图片描述：mui-icon-download
在这里插入图片描述：mui-icon-email
在这里插入图片描述：mui-icon-email-filled
在这里插入图片描述：mui-icon-eye
在这里插入图片描述：mui-icon-flag
在这里插入图片描述：mui-icon-forward
在这里插入图片描述：mui-icon-gear
在这里插入图片描述：mui-icon-gear-filled
在这里插入图片描述：mui-icon-help
在这里插入图片描述：mui-icon-help-filled
在这里插入图片描述：mui-icon-home
在这里插入图片描述：mui-icon-home-filled
在这里插入图片描述：mui-icon-image
在这里插入图片描述：mui-icon-info
在这里插入图片描述：mui-icon-info-filled
在这里插入图片描述：mui-icon-list
在这里插入图片描述：mui-icon-location

在这里插入图片描述：mui-icon-location-filled
在这里插入图片描述：mui-icon-locked
在这里插入图片描述：mui-icon-loop
在这里插入图片描述：mui-icon-map
在这里插入图片描述：mui-icon-mic
在这里插入图片描述：mui-icon-mic-filled/mui-icon-speech
在这里插入图片描述：mui-icon-micoff
在这里插入图片描述：mui-icon-minus
在这里插入图片描述：mui-icon-minus-filled
在这里插入图片描述：mui-icon-more
在这里插入图片描述：mui-icon-navigate
在这里插入图片描述：mui-icon-paperclip
在这里插入图片描述：mui-icon-paperplane
在这里插入图片描述：mui-icon-pengyouquan
在这里插入图片描述：mui-icon-person
在这里插入图片描述：mui-icon-person-filled
在这里插入图片描述：mui-icon-personadd
在这里插入图片描述：mui-icon-personadd-filled
在这里插入图片描述：mui-icon-phone
在这里插入图片描述：mui-icon-phone-filled
在这里插入图片描述：mui-icon-plus
在这里插入图片描述：mui-icon-plus-filled
在这里插入图片描述：mui-icon-plusempty
在这里插入图片描述：mui-icon-pulldown
在这里插入图片描述：mui-icon-qq
在这里插入图片描述：mui-icon-redo
在这里插入图片描述：mui-icon-refresh
在这里插入图片描述：mui-icon-refresh-filled
在这里插入图片描述：mui-icon-refreshempty
在这里插入图片描述：mui-icon-reload
在这里插入图片描述：mui-icon-search
在这里插入图片描述：mui-icon-settings
在这里插入图片描述:mui-icon-spinner
在这里插入图片描述:mui-icon-spinner-cycle
在这里插入图片描述:mui-icon-star
在这里插入图片描述:mui-icon-star-filled
在这里插入图片描述:mui-icon-starhalf
在这里插入图片描述:mui-icon-trash
在这里插入图片描述:mui-icon-undo
在这里插入图片描述:mui-icon-upload
在这里插入图片描述:mui-icon-videocam
在这里插入图片描述:mui-icon-weibo
在这里插入图片描述:mui-icon-weixin

Star_hui_
关注
  • 7
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mui增加自定义icon图标
啊宇丫
06-06 811
mui增加自定义icon图标
MUI实现自定义图标
浪子四方
09-03 1227
引言 在日常生活中，我们对图的感知能力总要强于对字的感知能力，所以在开发过程中适当的在应用里添加一些小巧又漂亮的图标是很有必要的，这可以轻轻松松的提高一大截的用户体验。笔者喜欢用MUI来做混合开发，可是在使用的过程中发现MUI自带的小图标并不能满足日常的开发，所以留下此笔记希望能帮助到遇到同样问题的小伙伴们。 MUI自带的图标 传送门：https://dev.dcloud.net.cn...
mui 扩展的icon
weixin_30595035的博客
01-25 306
---恢复内容开始--- 直接引入mui-icon-extra.css与mui-icons-extra.ttf 结构目录如下： mui-icon-extra.css链接： http://dev.dcloud.net.cn/mui/dist/css/mui-icons-extra.css?v=2016-08-07%2019:43:10%20-0700 获取mui-icons-...
开源 Icon（图标） 大集合
m0_66995023的博客
04-03 778
Remix Icon 是一套面向设计师和开发者的开源图标库，所有的图标均可免费用于个人项目和商业项目。与拼凑混搭的图标库不同，Remix Icon 的每一枚图标都是由设计师按照统一规范精心绘制的，在拥有完美像素对齐的基础上，确保每一枚图标风格一致且简洁易读。图标以 24x24 网格为基准，分为 “线性图标” 和 “面型图标” 两种风格，其图标风格为中性风格，适用于各种用户群体的项目。该系统图标库包含常用的图标，如用于媒体播放、通讯、内容编辑、连接等等，其图标在 Web 应用，安卓和 iOS 设计均适用。
移动开发最新跨平台移动APP开发进阶(一)：mui开发注意事项_mui移动开发(1)，2024年最新腾讯安卓面试
最新发布
2401_84545497的博客
05-12 586
感觉现在好多人都在说什么安卓快凉了，工作越来越难找了。又是说什么程序员中年危机啥的，为啥我这年近30的老农根本没有这种感觉，反倒觉得那些贩卖焦虑的都是瞎j8扯谈。当然，职业危机意识确实是要有的，但根本没到那种草木皆兵的地步好吗？Android凉了都是弱者的借口和说辞。虽然 Android 没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。
（二）muse-ui 风格&工具
Beic13的博客
06-19 1213
基于 Vue 2.0 优雅的 Material Design UI 组件库 color 与 Typography 在 安装 muse-ui 中 1 muse-ui 风格的使用 1.1 主题 Theme muse-ui 支持使用 javascript 定制和切换主题，默认提供 light 和 dark 两种主题风格。 切换主题 import theme from 'muse-ui/lib/theme'; theme.use('dark'); 自定义主题 import theme from 'muse.
mui 图标显示不出来解决方案
weixin_45932157的博客
01-22 1752
1.错误显示， 可以看到图标显示不出来： 原因：mui 是有自己的 icon 图标的 他是把小图片 存在字体里面 然后在 用引用字体的方式来 读出图标的。 我引用 了 mui.js之后 发现icon 图标是没出来了，原因很简单，我还少放了一个字体文件进行项目。 mui.ttf （mui的 字体文件） 然后就事放在哪里的问题了 直接看图吧 也就是说要新建一个跟mui.min.css cs...
uniapp 微信小程序导航栏不起作用
Laladoge的博客
03-04 4183
uni-app导航只需要在pages.json里面修改app-plus { "path": "pages/index/index", "style": { "app-plus":{ "scrollIndicator":"none", "titleNView":{ "searchInput":{ "align":"center...
基于mpvue的微信小程序项目搭建
weixin_34124939的博客
11-30 160
[TOC] 1. 创建项目 参照mpvue五分钟上手教程 # 全局安装 vue-cli $ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目 $ vue init mpvue/mpvue-quickstart my-project # 安装依赖 $ cd my-project $ npm install # 启动构建 $...
mui3.4框架文字图标库
11-06
此版本是3.4，亲测有效，主要解决密码眼睛显示成方块的问题
Vue cli+mui 区域滚动的实例代码
12-29
vue cli+mui配合使用达到区域滚到的效果 ，方法如下 第一步 引入mui css js @import url(/static/mui.min.css); JS import mui from '../....下面粘贴我代码的一部分 <div class=goods_foods mui-scroll-wrappe
mui自带图标.rar
10-12
MUI中的自带图标，根据版本自己用吧。
mui滚动条 的实现源代码
11-15
mui滚动条 代码
MUI列表条目点击事件代码
03-04
本项目是MUI列表条目点击事件的示例代码，目的是让大家了解MUI的点击事件该怎么写。
MUI学习之路---了解MUI，MUI的第一个项目和页面的跳转
小牛叹气生活不易的博客
08-23 3916
了解MUI，MUI的第一个项目和页面的跳转
vue ui组件muse-ui的使用
weixin_30699741的博客
04-28 1948
安装 npm install muse-ui typeface-roboto material-design-icons vuex axios --save Muse UI 是一套 Material Design 风格开源组件库，旨在快速搭建页面。它基于 Vue 2.0 开发，并提供了自定义主题，充分满足可定制化的需求。 material-design-icons 是谷歌定义的一套icon t...
mui汉字图标_mui如何增加自定义icon图标
weixin_39895684的博客
12-21 298
mui如何增加自定义icon图标===mui框架遵循极简原则，在icon图标集上也是如此，mui仅集成了原生系统中最常用的图标；其次，mui中的图标并不是图片，而是字体，至于为什么使用字体图标而不是图片，相信web开发者多少都有所了解，简单列举几条：多个图标字体合成一个字体文件，避免每张图片都需要联网请求；字体可任意缩放，而图片放大会失真、缩小则浪费像素；可通过css任意改变颜色、设置阴影及透明效...
mui中从阿里巴巴矢量图标库官网制作自定义图标icon
Dome-A
05-17 2989
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）
爱我的修罗
08-04 5166
底部导航栏应该是现在主流APP最常用的一种显示方式，我个人也觉得底部导航栏最清晰直观，一般以4-5个为宜。这里我做了点小东西，就是点击某个选项卡的时候，它自动高亮，并且改变icon，这样整体感觉就非常动感，比如信息选项卡，未点击的时候是一个封闭的信封，一点就变成打开的信封，要的就是这个效果。这里主要用到如下几种东西：【底部选项卡】，【外部icon引用】，【icon自动变换】，见代码和注释，上面的都...
mui下拉菜单代码示例
04-04
以下是一个简单的mui下拉菜单代码示例： HTML: ``` <header class="mui-bar mui-bar-nav"> <a class="mui-action-menu mui-icon mui-icon-bars mui-pull-left"></a> <h1 class="mui-title">下拉菜单</h1> </header> <div class="mui-content"> <div class="mui-content-padded"> <p>点击左上角菜单按钮展示下拉菜单</p> </div> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a href="#">菜单项1</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单项2</a> </li> <li class="mui-table-view-cell"> <a href="#">菜单项3</a> </li> </ul> </div> ``` CSS: ``` .mui-bar-nav a.mui-action-menu { font-size: 24px; } ``` JavaScript: ``` mui.init({ swipeBack: false }); var menuWrapper = document.getElementById('menu-wrapper'); var menu = document.getElementById('menu'); var menuWrapperClassList = menuWrapper.classList; var backdrop = document.getElementById('menu-backdrop'); document.getElementById('show-menu').addEventListener('tap', function() { menuWrapperClassList.add('mui-active'); backdrop.addEventListener('tap', closeMenu); menu.addEventListener('webkitTransitionEnd', menuTransitionEnd); backdrop.show(); }); var closeMenu = function() { menuWrapperClassList.remove('mui-active'); backdrop.removeEventListener('tap', closeMenu); menu.removeEventListener('webkitTransitionEnd', menuTransitionEnd); backdrop.hide(); } var menuTransitionEnd = function(e) { if (e.target === menu) { backdrop.removeEventListener('tap', closeMenu); backdrop.addEventListener('tap', closeMenu); } } ``` 注：以上代码需要引入mui.css和mui.js文件。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值