Custom icons / Use Font awesome

Jodit provides several ways to replace toolbar icons. You can replace one icon or all icons at once.

Customize one icon

You can replace the icon for a specific button:

Jodit.make('#editor', {
	controls: {
		bold: {
			iconURL: 'https://xdsoft.net/favicon.png'
		}
	}
});
Copy

Or through the module Icon

Jodit.modules.Icon.set(
	'brush',
	`<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="50" />
</svg>`
);
Jodit.make('#editor');
Copy

Result

Replace all icons

Or replace all icons in Jodit.

For example, let's connect Jodit with Font Awesome icons

Include Jodit and and the CDN Font Awesome

<link
	rel="stylesheet"
	href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
<link rel="stylesheet" href="build/jodit.min.css" />
<script src="build/jodit.min.js"></script>
Copy

Create input element

<textarea id="editor">Some text</textarea>
Copy

And define method getIcon:

Jodit.make('#editor', {
	getIcon: function (name, clearName) {
		let code = name;

		// not all font awesome icons is matched to Jodit icons
		switch (clearName) {
			case 'redo':
				code = 'rotate-right';
				break;
		}

		return (
			'<i style="font-size:14px" class="fa fa-' + code + ' fa-xs"></i>'
		);
	}
});
Copy

For full replacing you can copy this code:

Jodit.make('#editor', {
	getIcon: function (name, clearName) {
		let code = clearName;

		switch (clearName) {
			case 'redo':
				code = 'rotate-right';
				break;

			case 'video':
				code = 'video-camera';
				break;

			case 'copyformat':
				code = 'clone';
				break;

			case 'about':
				code = 'question';
				break;

			case 'selectall':
				code = 'legal';
				break;

			case 'symbol':
				return '<span style="text-align: center;font-size:14px;">Ω</span>';

			case 'hr':
				code = 'minus';
				break;

			case 'left':
			case 'right':
			case 'justify':
			case 'center':
				code = 'align-' + name;
				break;

			case 'brush':
				code = 'tint';
				break;

			case 'fontsize':
				code = 'text-height';
				break;

			case 'ul':
			case 'ol':
				code = 'list-' + name;
				break;

			case 'source':
				code = 'code';
				break;
		}

		return (
			'<i style="font-size:14px" class="fa fa-' + code + ' fa-xs"></i>'
		);
	}
});
Copy

Result