EasyUI Forum
July 17, 2024, 09:26:04 PM *
Welcome, Guest. Please login or register.

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

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


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
Hero Member
Posts: 2269

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.
@import 'http://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css';
    background-image: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    content: "\f105"
    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.
"iconCls":"fa fa-copy"
"iconCls":"fa fa-cut"
Rubal Walia
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.
Pages: [1]
Jump to:  

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