font-awesome与easyui结合

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

备忘记录

最近想重拾起来,做个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张图片

显然,font-awesome的图标与easyui的图标兼容的不错。

先看一下,官网上的1个原生示例:




    
    MenuButton Actions - jQuery EasyUI Demo
    
    
    
    
    


    

MenuButton Actions

    

Click the buttons below to perform actions.

             Disable Edit         Enable Edit     
             Home         Edit         Help         About     
             Undo
        Redo
        
        
Cut
        
Copy
        
Paste
        
        
            Toolbar             
                
Address
                
Link
                
Navigation Toolbar
                
Bookmark Toolbar
                
                
New Toolbar...
            
        
        Delete
        
Select All
    
             
Help
        
Update
        
About
    
                      Try jQuery EasyUI to build your modern, interactive, javascript applications.

      


具体的改造步骤如下:

  1. 下载font-awesome,在网页上引用,地址:http://fortawesome.github.io

  2. 定义一个class,用于适配,内容为:   .e-icon{padding-top:3px;},解决图标位置移位问题  (有可能需要用到)

  3. 以edit为例,将iconCls:'icon-edit'改为 iconCls:'e-icon fa fa-edit'

  4. 重新显示界面,看看效果吧.


转载于:https://my.oschina.net/itwarcraft/blog/337256

你可能感兴趣的:(font-awesome与easyui结合)