DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2014-12-26 16:14
  • 更新:2020-10-27 09:45
  • 阅读:347277

mui如何增加自定义icon图标

分类:MUI

mui如何增加自定义icon图标
===
mui框架遵循极简原则,在icon图标集上也是如此,mui仅集成了原生系统中最常用的图标;其次,mui中的图标并不是图片,而是字体,至于为什么使用字体图标而不是图片,相信web开发者多少都有所了解,简单列举几条:

  • 多个图标字体合成一个字体文件,避免每张图片都需要联网请求;
  • 字体可任意缩放,而图片放大会失真、缩小则浪费像素;
  • 可通过css任意改变颜色、设置阴影及透明效果;

在实际项目中,开发者难免会需要自定义图标,此时该如何操作呢?本文以阿里巴巴矢量图标库为例(同样的网站有很多,比如icomoon,欢迎热心用户分享其它平台的使用方法),介绍一种用户自定义图标的方法,假设我们要做一个电商项目,需要补充男装、女装、购物车三个图标,如下为分步实现操作;

登录

浏览器访问阿里巴巴矢量图标库官网,选择登录方式,可直接使用新浪微博账号登录;

搜索图标

在右上角搜索“男装”,会列出当前网站上的所有男装图标,如下:
image
选择自己喜欢的图标,点击,会添加到右上角的购物车中,如下:
image
同样的方式分别搜索选择女装、购物车图标,结果如下:
image
之后点击“存储为项目”,输入项目名字,例如“mui-icon-custom”,点击“存储”按钮后,会跳转到项目管理页面,如下图所示:
image

下载字体

点击“下载到本地”按钮,会将合并后的字体文件及自动生成的css全部下载,如下:
image

修改css

默认的css代码如下:

@font-face {font-family: "iconfont";  
  src: url('iconfont.eot'); /* IE9*/  
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */  
  url('iconfont.woff') format('woff'), /* chrome、firefox */  
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */  
}  

.iconfont {  
  font-family:"iconfont" !important;  
  font-size:16px;  
  font-style:normal;  
  -webkit-font-smoothing: antialiased;  
  -webkit-text-stroke-width: 0.2px;  
  -moz-osx-font-smoothing: grayscale;  
}  

.icon-nanzhuang:before { content: "\e600"; }  

.icon-nvzhuang:before { content: "\e601"; }  

.icon-gouwuche:before { content: "\e602"; }

我们可稍作如下修改:

  • 为保证和mui目录结构统一,建议将字体文件放在fonts目录下,这样我们需要修改@font-face下得url属性;
  • 只兼容iOS和Android版本的话,我们仅需要ttf格式的字体即可,其它字体可以删除;同时,我们也仅需保留-webkit前缀语法,-moz前缀部分可以删除;

修改后的css代码如下:

    @font-face {font-family: "iconfont";  
        src:url('../fonts/iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/  
    }  

    .iconfont {  
        font-family:"iconfont" !important;  
        font-size:16px;  
        font-style:normal;  
        -webkit-font-smoothing: antialiased;  
        -webkit-text-stroke-width: 0.2px;  
    }  

    .icon-nanzhuang:before { content: "\e600"; }  

    .icon-nvzhuang:before { content: "\e601"; }  

    .icon-gouwuche:before { content: "\e602"; }

集成mui

将iconfont.css及iconfont.ttf两个文件分别拷贝到mui工程css及fonts目录下,然后即可在mui中引用刚生成的字体图标,我们以选项卡为例,代码如下:

    <nav class="mui-bar mui-bar-tab">  
        <a class="mui-tab-item mui-active">  
            <span class="mui-icon iconfont icon-nanzhuang"></span>  
            <span class="mui-tab-label">男装</span>  
        </a>  
        <a class="mui-tab-item">  
            <span class="mui-icon iconfont icon-nvzhuang"></span>  
            <span class="mui-tab-label">女装</span>  
        </a>  
        <a class="mui-tab-item">  
            <span class="mui-icon iconfont icon-gouwuche"></span>  
            <span class="mui-tab-label">购物车</span>  
        </a>  
        <a class="mui-tab-item">  
            <span class="mui-icon mui-icon-gear"></span>  
            <span class="mui-tab-label">设置</span>  
        </a>  
    </nav>

主要代码:将mui默认的icon(如mui-icon-home)替换成iconfont icon-nanzhuang,修改后预览效果如下:

image

123 关注 分享
liozeeho elaine 有毒葡萄 Sheep stock2 candice 一气三清 安安的eHome jacktom 一瓢哥会狮吼功 Kid 王彦坡 NyxFang wenju 唐唐 DIOGO 徐梓萱 懵坚 thyiad 佳人逝水丶 LOL乌迪尔 X丶Blade 真的老白 明亮 ming300 Back faker 闪闪 tolerious peter_yu Xiao小树 whosmyqueen YumeHana Jimmy_p117 稳稳 我兜兜有糖 温叶 欲风 ayone 大胖子 Miss Visionary farce 有光 好冷 yaohuiQiu chen214123158 肥陈 liuxiaomin@boholo.com lingchengzhao@126.com

要回复文章请先登录注册

全栈工程师

全栈工程师

回复 Allenlee1221@163.com :
有什么问题,可以联系我解决
2020-10-27 09:45
Allenlee1221@163.com

Allenlee1221@163.com

图片看不见了呀,能不能处理一下啊
2020-10-26 10:26
263634948@qq.com

263634948@qq.com

我想扩展uni的图标,官方在原来的基础上加图标要怎么做
2020-06-03 15:39
lige866@qq.com

lige866@qq.com

Can't resolve './font_533566_yfq2d9wdij.eot' in '\xsAllSort' 提示这个
2019-10-29 10:48
nameHulk

nameHulk

项目引入一个下载好的本地字体ttf文件,配置不生效,请问是否碰到过这个问题,非iconfont字体图标,纯字体文件
@font-face{
font-family: 'sg';
src: 'static/Singular_Bold.ttf'
}
body{
font-family: 'sg';
}
2019-05-22 11:00
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 917366761@qq.com :
mui中可以通过监听点击事件自己实现,uni-app中已实现了类似小程序的tabs配置封装
2018-12-13 16:50
917366761@qq.com

917366761@qq.com

回复 DCloud_UNI_CHB :
矢量库之前也一直用。我就想问MUI有没有点击替换字体图标的方法。因为大多数App的底部导航栏图标在未点击时为空心图片,点击后为实心图片。MUI应该像微信小程序那样直接封装好这个东西。
2018-12-12 16:51
任我皮

任我皮

好东西
2018-12-12 14:55
zkkpkk

zkkpkk

回复 cglandy@qq.com :
这个好!
2018-11-20 14:33
FYC

FYC

学习了,感谢大家
2018-11-13 08:15