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';
.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.
"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"
}]