mui增加自定义icon图标

参考：http://ask.dcloud.net.cn/article/128

1.下载 .ttf 字体
2.修改css
3.测试

源码链接：https://pan.baidu.com/s/1OEgYtXS-dDWem-7W7IQR-A
提取码：hakh

效果如下

1.下载 .ttf 字体
传送门：阿里巴巴矢量图标库

选取图标后，添加到项目

下载到本地

2.解压后修改css

@font-face {font-family: iconfont;  src:url('../fonts/iconfont.ttf') format('truetype');
}.iconfont {font-family: iconfont;font-size: 20px;font-weight: normal;font-style: normal;line-height: 1;display: inline-block;text-decoration: none;-webkit-font-smoothing: antialiased;
}.iconfont ~ .mui-tab-label
{font-size: 13px;display: block;overflow: hidden;text-overflow: ellipsis;
}.icon-nav1:before {content: "\e699";
}.icon-nav2:before {content: "\e609";
}.icon-nav3:before {content: "\e63b";
}.icon-nav4:before {content: "\e75e";
}

3.测试
ctrl+c css和ttf到测试项目
使用如下

<nav class="mui-bar mui-bar-tab"><a id="defaultTab" class="mui-tab-item mui-active" href="1.html"><span class="iconfont icon-nav1"></span><span class="mui-tab-label">首页</span></a><a class="mui-tab-item" href="2.html"><span class="iconfont icon-nav2"></span><span class="mui-tab-label">课程</span></a><a class="mui-tab-item" href="3.html"><span class="iconfont icon-nav3"></span><span class="mui-tab-label">发现</span></a><a class="mui-tab-item" href="4.html"><span class="iconfont icon-nav4"></span><span class="mui-tab-label">我的</span></a>
</nav>

mui增加自定义icon图标相关推荐

HBuilder webApp开发(十五)MUI增加自定义icon图标
前段时间有朋友问我,MUI里面怎么添加字体图标.后来下班后给他做了一个小的Demo,其实这个看卡MUI的文档就有.mui如何增加自定义icon图标. 其实这个不仅限于MUI,其他项目比如PC项目也可以 ...
在项目中增加自定义icon图标
以MUI框架为例,内容来自于MUI官网. mui如何增加自定义icon图标 mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标:其次,mui中的图标并不是图片,而 ...
为BlueLake主题增加自定义icon图标
一.前言 hexo 的 Bluelake 主题是我一直在用的,简单大方,很喜欢.但最近有了添加自定义 icon 图标的需求,比如,添加 "地址"."扫一扫".& ...
mui汉字图标_MUI从入门到项目实战（三）增加自定义icon图标
@font-face{font-family:"iconfont";src:url('iconfont.eot?t=1559111511464'); /*IE9*/src:url( ...
【Layui】layui 自定义icon 图标
layui 自定义icon 图标 Layui 提供的图标较少,通常不能满足个性化的需求,阿里,font-awesome等提供免费的图库,那么如何扩展呢? 准备工作前提工作,自己下载好layui,注册 ...
在iview + vue项目中使用自定义icon图标
最近做一个后台管理系统,是用iview+vue cli2做的,在做的过程中需要将左侧的导航栏加入icon图标,但是iview库里的图标和UI要求不符,这就需要引入自己的图标库. 1. UI设计师会把自 ...
vue项目改图标_vue使用自定义icon图标的方法
首先因为elementUI提供的icon太少了,所有自己找找有没有矢量图可以补充的,尝试多种方法,觉得下面方法简单易懂,分享给大家效果图: 推荐使用阿里爸爸矢量图标管理,iconfont 使用方法 ...
uniapp 使用自定义icon图标
1.下载图标文件阿里图标库位置:iconfont-阿里巴巴矢量图标库 eg: 搜索 "书签" 图标,点击加入购物车,再进入购物车,填写加入项目,也可以直接下载,点击编辑编辑可以 ...
【ElementUI组件优化】自定义icon图标的使用
风雨里做个大人,阳光下做个小孩. 前端经常会用到UI提供的各种图表,推荐阿里的图标库.如果UI要求不是很严格,我们可以自己在图标库中找到想要的图标. 搜索之后可以点击下载. 在ElementUI中使用 ...

mui增加自定义icon图标

mui增加自定义icon图标相关推荐

最新文章

热门文章