首页 > 代码库 > font-awesome与easyui结合
font-awesome与easyui结合
备忘记录
最近想重拾起来，做个ERP系统，做为一个前端盲，前端框架的选择是最头痛的问题
当前***bootstrap***与***font-awesome***的组合无疑是非常有吸引力的，从网上下了N多的后台框架模板，断断续续调试了1个月，最终弄出来的总是感觉不伦不类，无奈还是放弃
于是又想起了easyui，看到官网更新到1.4了，还有bootstrap主题，ok还是用它吧。
搭建框架时，看到easyui图标还是用的png的，那么考虑能不能直接使用font-awesome图标，不使用自身的呢？
先试了替换PNG图片，效果不好。
于是想借助easyui本身的机制，将font-awesome的css与easyui结合。
先看图：
显然，font-awesome的图标与easyui的图标兼容的不错。
先看一下，官网上的1个原生示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>MenuButton Actions - jQuery EasyUI Demo</title> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/demo.css"> <script type="text/javascript" src="http://www.mamicode.com/jquery.min.js"></script> <script type="text/javascript" src="http://www.mamicode.com/jquery.easyui.min.js"></script> </head> <body> <h2>MenuButton Actions</h2> <p>Click the buttons below to perform actions.</p> <div style="margin:20px 0;"> <a href="http://www.mamicode.com/#" class="easyui-linkbutton" onclick="$(‘#btn-edit‘).menubutton(‘disable‘)">Disable Edit</a> <a href="http://www.mamicode.com/#" class="easyui-linkbutton" onclick="$(‘#btn-edit‘).menubutton(‘enable‘)">Enable Edit</a> </div> <div class="easyui-panel" style="padding:5px;"> <a href="http://www.mamicode.com/#" class="easyui-linkbutton" data-options="plain:true">Home</a> <a id="btn-edit" href="http://www.mamicode.com/#" class="easyui-menubutton" data-options="menu:‘#mm1‘,iconCls:‘icon-edit‘">Edit</a> <a href="http://www.mamicode.com/#" class="easyui-menubutton" data-options="menu:‘#mm2‘,iconCls:‘icon-help‘">Help</a> <a href="http://www.mamicode.com/#" class="easyui-menubutton" data-options="menu:‘#mm3‘">About</a> </div> <div id="mm1" style="width:150px;"> <div data-options="iconCls:‘icon-undo‘">Undo</div> <div data-options="iconCls:‘icon-redo‘">Redo</div> <div class="menu-sep"></div> <div>Cut</div> <div>Copy</div> <div>Paste</div> <div class="menu-sep"></div> <div> <span>Toolbar</span> <div> <div>Address</div> <div>Link</div> <div>Navigation Toolbar</div> <div>Bookmark Toolbar</div> <div class="menu-sep"></div> <div>New Toolbar...</div> </div> </div> <div data-options="iconCls:‘icon-remove‘">Delete</div> <div>Select All</div> </div> <div id="mm2" style="width:100px;"> <div>Help</div> <div>Update</div> <div>About</div> </div> <div id="mm3" class="menu-content" style="background:#f0f0f0;padding:10px;text-align:left"> <img src="http://www.jeasyui.com/images/logo1.png" style="width:150px;height:50px"> <p style="font-size:14px;color:#444;">Try jQuery EasyUI to build your modern, interactive, javascript applications.</p> </div> </body> </html>
具体的改造步骤如下：
下载font-awesome,在网页上引用,地址：http://fortawesome.github.io
定义一个class,用于适配,内容为: .e-icon{padding-top:3px;},解决图标位置移位问题 (有可能需要用到)
以edit为例,将iconCls:‘icon-edit‘改为 iconCls:‘e-icon fa fa-edit‘
重新显示界面,看看效果吧.
font-awesome与easyui结合
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。