注册登录

诚展小刚

发布：2017-09-17 21:58
更新：2018-04-20 17:43
阅读：1793

九宫格的图标为何没法放大？

分类：MUI

我在iconfont.css里修改图标的font-size来改变大小怎么没有效果了；

.iconfont {
font-family:"iconfont" !important;
font-size:18px;
font-style:normal;
-webkit-font-smoothing: antialiased;
}
改18px,20px，30px都一样，小小的，我一行也只显示三个图标啊；

还有哪里没有设置对吗？

<div class="mui-content" style="padding: 1px 1px;margin-bottom: 1px;">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon iconfont icon-jiaban mui-active"></span>
<div class="mui-media-body">加班申请</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon iconfont icon-639 mui-active"></span>
<div class="mui-media-body">请假申请</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon iconfont icon-budaqia01 mui-active"></span>
<div class="mui-media-body">补卡申请</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon iconfont icon-shenpi1 mui-active"></span>
<div class="mui-media-body">我的审批</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon iconfont icon-paiban_on mui-active"></span>
<div class="mui-media-body">我的排班</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon iconfont icon-daqiaqingkuang mui-active"></span>
<div class="mui-media-body">打卡记录</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon iconfont icon-paibanguanli1 mui-active"></span>
<div class="mui-media-body" >日考勤</div></a></li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon iconfont icon-rencaiyidongzititubiao mui-active"></span>
<div class="mui-media-body" >我的薪资</div></a></li>
<li id="allfun" class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
<span class="mui-icon mui-icon-more mui-active"></span>
<div class="mui-media-body">全部功能</div></a></li>
</ul>
</div>

2017-09-17 21:58 负责人:无分享

3 个回复

Sinea - www.sinea.cn

优先级不够，可尝试!important

诚展小刚 (作者)

能具体一点吗？谢谢

2017-09-18 11:36
Sinea

这算是css的基础写页面的话应该补补网上搜索有很多文章介绍 !important用法 font-size:18px!important;

2017-09-18 14:24

回梦無痕 - 暂停服务

<span class="mui-icon iconfont icon-rencaiyidongzititubiao mui-active"></span>

改成

<span class="mui-icon mui-active iconfont icon-rencaiyidongzititubiao"></span>

回梦無痕

如果不行，试用楼上的方法，!important声明强制优先

2017-09-18 12:44
诚展小刚 (作者)

嗯，改了不行，这个声明强制优先，是怎么操作了？谢谢

2017-09-18 12:52
回梦無痕

回复诚展小刚:你百度一下就有了。

2017-09-18 12:53

风大大

/选择要修改的图标的类名，然后修改font-size的值/
.icon-jiaban,.icon-shenpi1{font-size:30px;}

该问题目前已经被锁定, 无法添加新回复