Font awesome

</> Source
<!DOCTYPE html>
	<title>Font awesome</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_awesome/css/font-awesome.min.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
		table.my_table {
			margin: 20px 0px;
		table.my_table td {
			padding-right: 20px;
		var myRibbon;
		function doOnLoad() {
			myRibbon = new dhtmlXRibbon({
				parent: "ribbonObj",
				iconset: "awesome",
				items: [
					{type: "block", text: "Project", list: [
						{id: "create", type: "button", text: "Create", img: "fa fa-file-o", imgdis: "fa fa-file-o", isbig: true},
						{id: "open", type: "button", text: "Open Project", img: "fa fa-folder-open-o", imgdis: "fa fa-folder-open-o"},
						{id: "print", type: "button", text: "Print", img: "fa fa-print", imgdis: "fa fa-print"},
						{id: "save", type: "button", text: "Save As...", img: "fa fa-save", imgdis: "fa fa-save"}
					{type: "block", text: "Edit", list: [
						{id: "cut", type: "button", text: "Cut", img: "fa fa-scissors", imgdis: "fa fa-scissors", isbig: true},
						{id: "copy", type: "button", text: "Copy", img: "fa fa-files-o", imgdis: "fa fa-files-o", isbig: true},
						{id: "paste", type: "button", text: "Paste", img: "fa fa-clipboard", imgdis: "fa fa-clipboard", isbig: true}

		function doOnUnload() {
			if (myRibbon && myRibbon.unload) {
				myRibbon = null;
		function setImage(id, img, imgdis) {
			myRibbon.setItemImage(id, img);
			myRibbon.setItemImageDis(id, imgdis);

<body onload="doOnLoad();" onunload="doOnUnload();">
	<div id="ribbonObj"></div>
	<table cellspacing="1" cellpadding="1" class="my_table">
				<input type="button" onclick="setImage('open', 'fa fa-file-o', 'fa fa-file-o');" value="open">
				<input type="button" onclick="setImage('open', 'fa fa-print', 'fa fa-print');" value="print">
				<input type="button" onclick="setImage('open', 'fa fa-save', 'fa fa-save');" value="save">
				<input type="button" onclick="myRibbon.enable('open');" value="enable">
				<input type="button" onclick="myRibbon.disable('open');" value="disable">
				<input type="button" onclick="setImage('cut', 'fa fa-scissors', 'fa fa-scissors');" value="cut">
				<input type="button" onclick="setImage('cut', 'fa fa-files-o', 'fa fa-files-o');" value="copy">
				<input type="button" onclick="setImage('cut', 'fa fa-clipboard', 'fa fa-clipboard');" value="paste">
				<input type="button" onclick="myRibbon.enable('cut');" value="enable">
				<input type="button" onclick="myRibbon.disable('cut');" value="disable">


Check documentation to learn how to use the components and easily implement them in your applications.