MUI的字体图标

Myth丶恋晨 2023-09-29 09:31 151阅读 0赞

简介

mui默认提供了手机App开发常用的字体图标,不是图片的形式引入,而是字体图标,可以将icon看做是一个普通的文字,好处是可以直接通过CSS样式控制它的颜色和大小等(如color、font-size等),且图标的引入比较简单。
例如:微信图标

  1. <span class="mui-icon mui-icon-weixin"></span>

注意:这些样式设定时一般需要设定在span元素上。

字体图标文件fonts文件夹下的mui.ttf文件,在mui.min.css中引入
html中引入:
在这里插入图片描述

第三方字体库

mui提供的字体图标有限,有时候无法满足我们的需求,这时候需要使用第三方字体图标库,如阿里巴巴矢量图标库(https://www.iconfont.cn/)。
在这里插入图片描述

相关链接
1、MUI的简介
2、MUI的字体图标
3、MUI的事件处理
4、HbuilderX中新建MUI下的移动端App
5、H5+ Webview窗口对象
6、MUI-底栏实现-页面切换
7、MUI-标题栏实现-样式复写效果
8、MUI-栅格系统-实现元素排版
9、MUI-列表实现
10、MUI-列表实现2
11、MUI-轮播插件实现-UI组件
12、MUI-弹出菜单
13、MUI-页面刷新
14、MUI-新建子页面
15、MUI-页面之间传值(打开新的子页面)
16、HTML5+规范API-拍照功能
17、HTML5+规范API-系统相册获取功能
18、HTML5+规范API-地理位置获取
19、MUI-上拉刷新和下拉刷新
20、HTML5+规范API-扫码功能
21、HTML5+规范API-系统通讯录获取功能
22、Hbuilder无法完成应用程序云打包,一直报错需要打包校验
23、Hbuilder-应用程序打包
24、移动APP开发的三种常见模式
25、IOS系统测试APP时发现input内无法选中并输入值
26、MUI-购物车

发表评论

表情:
评论列表 (有 0 条评论,151人围观)

还没有评论,来说两句吧...

相关阅读

    相关 MUI实现自定义图标

    引言 在日常生活中,我们对图的感知能力总要强于对字的感知能力,所以在开发过程中适当的在应用里添加一些小巧又漂亮的图标是很有必要的,这可以轻轻松松的提高一大截的用户体验...

    相关 MUI字体图标

    简介 mui默认提供了手机App开发常用的字体图标,不是图片的形式引入,而是字体图标,可以将icon看做是一个普通的文字,好处是可以直接通过CSS样式控制它的颜色和大小等

    相关 font字体图标

    font 字体图标能够网页添加别致的字体风格样式,而且也能够起到在不同浏览器中统一字体风格的作用。 它的扁平化设计,将网页从冗余、厚重和繁杂的装饰效果中解脱出来;它的

    相关 mui自定义图标

    研究了一下自定义图标,不仅仅可以在h5里面用,还可以在小程序或者别的开发环境里面用。 首先找到图标源,我自己找的是阿里巴巴矢量图库。 ![watermark_type_Zm