EasyUI Forum

General Category => EasyUI for Angular => Topic started by: Rubal Walia on May 09, 2019, 09:27:34 PM



Title: Use Font Awesome with Tree
Post by: Rubal Walia 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!


Title: Re: Use Font Awesome with Tree
Post by: jarry 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"
}]


Title: Re: Use Font Awesome with Tree
Post by: Rubal Walia on May 13, 2019, 05:41:29 AM
That worked thanks!  :)

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.