EasyUI Forum
March 29, 2024, 12:29:55 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Use Font Awesome with Tree  (Read 8339 times)
Rubal Walia
Newbie
*
Posts: 4


View Profile WWW
« on: May 09, 2019, 09:27:34 PM »

Hello,

I am using lazy loading to load tree nodes. I want to achieve below mentioned things.
  • Set tree icon from font awesome using iconCls.
  • Set open and closed node icons from font awesome instead of easyUi icons.
  • Tree shows font loading icon even if node has no children.

For first, font awesome icon is being shown clipped and it overlaps default icon of node.
Let me know how to achieve second.
Third is very wired behavior.

Please help!
« Last Edit: May 20, 2019, 07:02:59 AM by Rubal Walia » Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #1 on: May 10, 2019, 07:25:43 PM »

Before applying the font awesome, please set the CSS styles in the 'styles.css' file. You can custom the folder icon by change these CSS code.
Code:
@import 'http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
.fa{
    background-image: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fa::before{
    font-size: 14px;
}
.fa.tree-folder:not(.tree-file)::before{
    content: "\f105"
}
.fa.tree-folder-open:not(.tree-file)::before{
    content: "\f107"
}

Each node has the 'iconCls' property that allows you to custom the node icon. Set it as 'fa fa-...' to use the font awesome icons.
Code:
"id":11,
"text":"Photos",
"iconCls":"fa",
"state":"closed",
"children":[{
"id":111,
"text":"Friend",
"iconCls":"fa fa-copy"
},{
"id":112,
"text":"Wife",
"iconCls":"fa fa-cut"
},{
"id":113,
"text":"Company"
}]
Logged
Rubal Walia
Newbie
*
Posts: 4


View Profile WWW
« Reply #2 on: May 13, 2019, 05:41:29 AM »

That worked thanks!  Smiley

I am using Font Awesome 5 so had to change uni-code for folder icons.

You didn't mention about how to prevent "Tree shows font loading icon even if node has no children."?

Look ahead to hearing from you very soon.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!