2018-05-14 12:45

easyui tree()使用font-awesome字体图标解决方法

摘要

:none
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "//www.w3.org/TR/html4/loose.dtd">
<html>
 <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <meta name="keywords" content="jquery,ui,easy,easyui,web" /> 
  <meta name="description" content="easyui help you build your web page easily!" /> 
  <title>jQuery EasyUI Demo</title> 
  <link rel="stylesheet" type="text/css" href="//www.jeasyui.net/Public/js/easyui/themes/default/easyui.css" /> 
  <link rel="stylesheet" type="text/css" href="//www.jeasyui.net/Public/js/easyui/themes/icon.css" /> 
  <script type="text/javascript" src="//code.jquery.com/jquery-1.6.1.min.js"></script> 
  <script type="text/javascript" src="//www.jeasyui.net/Public/js/easyui/jquery.easyui.min.js"></script> 
  <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" /> 
  <style>
	.tree-icon {
    font: normal normal normal 12px/1 FontAwesome;
    font-size: 15px !important;
    background: none;
}
.tree-folder:BEFORE {
}
.tree-folder-open:BEFORE {
}
.tree-file:BEFORE {
}
	</style> 
 </head> 
 <body> 
  <ul id="tt"></ul> 
  <script>
	$(function(){
	$('#tt').tree({
	data: [{
		text: 'Item1',
		iconCls:"fa fa-home",
		state: 'closed',
		children: [{
		iconCls:"fa fa-home",
			text: 'Item11'
		},{
		iconCls:"fa fa-home",
			text: 'Item12'
		}]
	},{
		iconCls:"fa fa-home",
		text: 'Item2'
	}]
});
	});
	</script>  
 </body>
</html>

附上效果图

easyui-tree-fontIcon.jpg



如果这篇文章对你有所帮助,可以通过右边的“打赏”功能进行小额的打赏。

本网站部分内容来源于互联网,如有侵犯版权请来信告知,我们将立即处理。