layui自定义图标及展示

分享 未结 9 3469
雨时节
雨时节 2018-9-25
悬赏:20飞吻
看到layui的第三方组件的图标选择器都出来了,想了下还是在这里发个贴.说一下自定义图标.因为看了下第三方组件的icon代码.都是写死的.所以是没办法自定义的.但是由于自定义图标的不确定性,所以这个写成插件...我也觉得没必要...只是在这里分享给大家吧...有要用的.可以试试.先来一张自定义的图标图:

再来一张自定义图标的选择页面(这个页面大家可以自己写,只用看里面的有些写法就可以了,我也没写成插件.自己动手丰衣足食...)

感兴趣的兄弟.再向下看:
想要加入新的icon,或者是当前的icon不好看想要改改怎么办呢?
这里就要先说一下icon的文件,想要添加,删除修改icon,在layui中,无非就是这四个文件:iconfont.eot,iconfont.svg,iconfont.ttf,iconfont.woff,这四个文件,所有的图标元素都记录在这四个文件里面,但是这四个文件有很好的编辑器打开然后编辑吗?我不太清楚,我想就是有,编辑起来也不一定简单吧...对于程序员来说,there is another way!
访问如下网址:

https://icomoon.io/app/#/select

如果想以后一直维护自己的自定义图标库,推荐大家注册.
页面打开后可能就已经有了一大串icon了,不要的话,点击右边的菜单栏,然后选择remove set,如下图:

然后点击左上角的import icons 选择导入layui下的iconfont的SVG的文件.就可以了.
如果你还想额外加入一些icon的话.就再导入别的SVG文件,或者点击importicons 右边的按钮,会跳转到这个网站提供的一些icon库中添加.当然,这些其实都是不是我们要的,我们要的,是完整的自定义,这个,从iconfont开始:
打开iconfont的官网:
http://www.iconfont.cn/  
先登陆一个帐号(一般用新浪微博或者是github帐号),然后直接右上角搜索自己想要的icon,比如"菜单管理":

在图标上点击添加入库,接着搜索下一个icon当你搜索完毕以后.所有的icon都在购物车里面,然后在购物车里面点击下方的添加至项目,在项目里面, 所有的图标都已经排列好了,现在要做的.就是给图标命名,layui里面的每一人图标都有一串16进制的代码形如:
'&#x e67a;'
这前面的&#x是固定的,后面的e67a是这个图标的代码.layui的所有的图标基本都是e6开头的,所以,这里我们的自定义图标,尽量不要以e6开头,避免以后的冲突,在图标上点击铅笔形状的图标弹出编辑页面,将unicode自己自定义一个.不要以e6开头.你可以选择e9 e8等等...
所有的图标代码都改完后.点击页面上的下载至本地,这时这些图标就会自动被放入同一个svg的文件中了.
然后去icomoon上导入svg.组中选择select all,将layui与自定义的图标全部全中后点击界面下方的generate font,页面会卡顿一会儿,耐心等待,然后你所点击的tab会变成download,而且右边还会有一个设置的图标,点开后可以看到一些有用的设置.比如fontname,这个默认的就与layui不一样,如果你想直接覆盖.就得自己修改为iconfont,classprefix这个最好就不要改了.因为这里面还有layui的图标,需要正常显示...
download之后,再覆盖layui的iconfont中的文件,就可以使用自定义图标了.
这里有一个问题,需要说一下,就是layui的主页的那个图标,每一次导入svg再导出svg的时候,就消失了. ..这很郁闷.所以我用这个的时候.都是在自定义图标中选一个主页,然后代码改成和layui主页一样的.然后generate font的时候.不选中layui的主页的那个icon,这样这完美的避过了这个bug了.
上面说的都是一些实际操作,如果我们想在系统中弹出一大堆的图标,然后让他选择怎么弄呢?比如像这样:

不得不说iconmoon这个网站的细心了.在downloadsvg文件的时候.他还附带的生成了很多的文件,其中有一个叫做selection.json的文件.其实就是所有的图标的json数据,上面的动态图的页面.我就是通过这个selection.json来动态生成的,所以图标数据,不需要放在数据库里啦.那样很麻烦.也没必要.每更新一次图标,人家都已经生成好了一个selection.json文件给我们啦!
我用的是layui单页版,与标准版的写法可能有一些区别,但是聪明的程序员.应该是能看懂并且变成自己的代码的吧?^_^
父页面的弹框代码:
<form class="layui-form " lay-filter="LAY_form" action="" style="margin: 10px auto;">
<div class="layui-form-item">
<label class="layui-form-label">菜单图标</label>
<div class="layui-input-inline">
<input type="text" name="icon" id="LAY_icon" placeholder="输入Layui的图标编码" autocomplete="off" class="layui-input">
</div>
<label class="layui-form-label" id="iconlabel" style="text-align: left;"></label>
<script type="text/html" id="icontmp" type="text/html">
{{# var iconfunction = function(text){return text?'&#x'+text+';':''}; }}
<i class="layui-icon">
{{
iconfunction(d.toString(16))
}}
</i>
</script>

</div>
</form>
<script type="text/javascript">
layui.use(['layer', 'tree', 'jquery', 'table', 'admin', 'form', ], function() {
var layer = layui.layer;
var $ = layui.jquery;
var admin = layui.admin;
var laytpl = layui.laytpl;
$('#LAY_icon').on('click', function() {
admin.popup({
id: 'LAY_select_icon',
title: '选择图标',
area: [admin.screen() > 1 ? '803px' : '100%', admin.screen() > 1 ? '90%' : '100%'],
shadeClose: false,
btn: ['确认', '取消'],
yes: function(index, layero) {
var getTpl = $('#icontmp').html();
layui.laytpl(getTpl).render($('#LAY_basemodule_icons_selecticon').val(), function(html) {
$('#iconlabel').html(html);
});
$('#LAY_icon').val($('#LAY_basemodule_icons_selecticon').val())
layer.close(index);
},
btn2: function() {},
success: function() {
layui.view(this.id).render('/icon/icons');
}
});
});
});
</script>
选择yes的时候.要进行模板渲染,icon的图标,不会直接设置text的值就直接显示出来,那样只会是一个未识别的字符串,所以这里一定要记住,模板渲染哦.
<style type="text/css">
.select-icon {
cursor: pointer;
display: inline-block;
vertical-align: middle;
width: 127px;
height: 105px;
line-height: 25px;
padding: 20px 0;
margin-right: -1px;
margin-bottom: -1px;
border: 1px solid #e2e2e2;
font-size: 14px;
text-align: center;
color: #666;
transition: all .3s;
-webkit-transition: all .3s;
border: 1px solid #e2e2e2;
}

.doc-icon-name {
color: #c2c2c2;
}

.doc-icon-code {
color: #c2c2c2;
}

.doc-icon-fontclass {
height: 40px;
line-height: 20px;
padding: 0 5px;
font-size: 13px;
color: #333;
}

.layui-big-icon {
display: inline-block;
font-size: 36px;
}
</style>
<script type="text/html" template lay-url="./layui/font/iconfont/selection.json?v={{ layui.admin.v }}" lay-done="

layui.jquery('.select-icon').on('click',function () {
layui.jquery('.select-icon').css('background-color','#ffffff');
layui.jquery(this).css('background-color','#d3d3d3');
layui.jquery('#LAY_basemodule_icons_selecticon').val(layui.jquery(this).attr('icon-text'));
})">
<ul class="layui-row layui-col-space10">
{{# debugger; layui.each(d['icons'], function(index, item){ }}
<li class="layui-col-xs2 select-icon" icon-text="{{item.icon.defaultCode.toString(16)}}">
<i class="layui-icon layui-big-icon">
&#x{{item.icon.defaultCode.toString(16)}};
</i>
<div class="doc-icon-name">{{item.properties.name}}</div>
<div class="doc-icon-code">&#x{{item.icon.defaultCode.toString(16)}};</div>
</li>
{{# }) }}
</ul>
<input type="hidden" value="" id="LAY_basemodule_icons_selecticon" />
</script>
<style>
.common_area {
margin-top: -10px;
}

.common_area .layui-form-select dl {
max-height: 185px;
}

.common_area .layui-form-select dl dd {
height: 30px;
}
</style>
子页面的代码为一个动态模板,就是请求了selection.json文件,然后将所有的图标解析并显示出来.这里要说一下.selection.json里面的defaultCode这个字段为unicode的十进制的数值,所以这里在解析 时候.要把defaultCode转换为16进制字符,快捷方式为
defaultCode.toString(16)
这里我感觉到了js的异常强大..
上面的两个页面代码,再加上要解析的selection.json以及对应的iconfont文件,就能实现上面的动态图的功能了,但是这是单页版的代码,如果你的是标准版的代码或者是layui的代码,那就需要自己再重写了哦.动态模板功能,需要改为ajax请求了.
自定义图标的代码,在我的github上也有上传,链接是:
https://github.com/xieyushi/layuiadmin-yushijie
至此,自定义图标的功能,基本从选择,设计,覆盖,到页面的编写,就完成了 ,这一个功能,如果自己不熟的话,搞个一两天,都是有可能的呢.希望这篇文章,能让大家少踩一些坑,少花一点时间,但是却能了解layui的精髓,了解icon的精髓.
回帖