HBuilder webApp开发(十五)MUI增加自定义icon图标

前段时间有朋友问我，MUI里面怎么添加字体图标。后来下班后给他做了一个小的Demo，其实这个看卡MUI的文档就有。mui如何增加自定义icon图标。
其实这个不仅限于MUI，其他项目比如PC项目也可以这个做。
具体步骤：

登录iconfont

添加到购物车

下载代码

提取有用代码

源文件：

这里我们只需要样式文件:iconfont.css

字体文件:iconfont.ttf

其他格式的字体文件iconfont.wofficonfont.eoticonfont.svg
然后把这两个文件拖进项目目录，结果如图：

修改样式文件`iconfont.css`

修改前：

修改后：

使用

在html文件中引入iconfont.css文件，

link rel="stylesheet" href="css/iconfont.css"

使用：

<span class="iconfont icon-home" style="height: 40px; width: 40px;"></span>

效果

HBuilder webApp开发(十五)MUI增加自定义icon图标相关推荐

mui增加自定义icon图标
参考:http://ask.dcloud.net.cn/article/128 1.下载 .ttf 字体 2.修改css 3.测试源码链接:https://pan.baidu.com/s/1OEgY ...
在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
为BlueLake主题增加自定义icon图标
一.前言 hexo 的 Bluelake 主题是我一直在用的,简单大方,很喜欢.但最近有了添加自定义 icon 图标的需求,比如,添加 "地址"."扫一扫".& ...
HBuilder webApp开发(十)在线差异化升级
从4月份公司确定使用H5开发app,主要考虑了两点: 1.一套代码可以生成安卓和iOS 两个平台的app: 2.在线升级(差异化升级和整包升级). 到现在公司的两款app也基本做完了,期间还做了很多新 ...
mui汉字图标_MUI从入门到项目实战（三）增加自定义icon图标
@font-face{font-family:"iconfont";src:url('iconfont.eot?t=1559111511464'); /*IE9*/src:url( ...
STC8H开发(十五): GPIO驱动Ci24R1无线模块
目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解) STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解) ST ...
Linux开发十五_lcd驱动
Linux开发十五 lcd驱动象棋小子 1048272975 lcd能够支持彩色图像的显示和视频的播放,是一种很重要的输出设备,在一些嵌入式人机交互系统中,也往往需要lcd进行显示.Linux ...
HBuilder webApp开发(十三)二维码扫描
好久没有写<HBuilder webApp App开发>这个专栏了.这周的这两天暂时比骄没事,就对着官方文档barcode写了这个二维码扫描的Demo. 以前做原生开发的时候,关于二维码扫 ...
FreeSql （三十五）CodeFirst 自定义特性
比如项目内已经使用了其它 orm,如 efcore,这样意味着实体中可能存在 [Key],但它与 FreeSql [Column(IsPrimary = true] 不同. Q: FreeSql 实体 ...

HBuilder webApp开发(十五)MUI增加自定义icon图标

登录iconfont

添加到购物车

下载代码

提取有用代码

修改样式文件`iconfont.css`

使用

效果

HBuilder webApp开发(十五)MUI增加自定义icon图标相关推荐

最新文章

热门文章

HBuilder webApp开发(十五)MUI增加自定义icon图标

登录iconfont

添加到购物车

下载代码

提取有用代码

修改样式文件iconfont.css

使用

效果

HBuilder webApp开发(十五)MUI增加自定义icon图标相关推荐

最新文章

热门文章

修改样式文件`iconfont.css`