Use without Fontawesome?

[jeevank]

I love how small this JS library is compared to all the 100-500KB wysiwyg editors out there.

However the Fontawesome dependency adds 80KB to a 5KB JS library.. is there a way for us to use our icon set or substitute the FA dependency?

[fvilers]

Hi @jeevank !

Thanks for your comment. I've started working on the v2 and I'll definitively add your suggestion on my todo list. Please be aware that I'm about to go on holidays to don't expect a new release in the few days.

[Nikolasgrizli]

Hi, txt for your awesome lib! About fontawesome - I just use background-image
.form-editor .fas.fa-bold { background-image: url(../img/editor/editor-bold.svg); }

[fvilers]

Hi ! Sorry for the late reply, this project is really low on my priority list right now. You can use the Using the Font Awesome Pro Subsetter to only includes the necessary icons but it requires a Pro subscription. You could also give a try to the FontAwesome Subset project.

Moreover, I will accept any PR that replace the FA icons with others that are free to use and have an uniform look and feel across the whole toolbar.

[derStephan]

Hi,

thanks for the very neat little editor which is exactly what I needed. However, I did not want to include external css files which include Font Awesome.

I fixed it by substituting some of the buttons with UTF-8 symbols by using simple css.

<style>
.fas{
	font-style: normal;
}

.fa-bold::before {
	content: "B";
	font-weight: bold;
}

.fa-italic::before {
	content: "I";
	font-style: italic;
}

.fa-underline::before {
	content: "U";
	text-decoration: underline;
}

.fa-align-left::before {
	content: "⇇";
}

.fa-align-center::before {
	content: "⇆";
}

.fa-align-right::before {
	content: "⇉";
}

.fa-list-ol::before {
	content: "⋮";
}

.fa-list-ul::before {
	content:"⒈\A⒉";
	white-space: pre-wrap;
	display:inline-block;
	line-height: 0.5;
}

</style>

This leads to this result

I know that there are items missing but I personally don't need them and I just wanted to show a way that works without Font Awesome or any other external css. Maybe this is useful for anyone.

[fvilers]

Thanks, maybe we can think about replacing the icons with emoji ? As I said earlier, I currently have little to no time to implement this feature.

[risingisland]

Using SVG Material Symbols by Google License: Apache 2.0(commercial use is allowed, no attribution required)

I think I would change the style names (.fa-bold > .te-bold, etc.) and use this method, so no FontAwesome need or conflicts.

<style>
.fas{
	font-style: normal;
}

.fa-bold::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.8 19V5h5.525q1.625 0 3 1T16.7 8.775q0 1.275-.575 1.963t-1.075.987q.625.275 1.388 1.025T17.2 15q0 2.225-1.625 3.113t-3.05.887zm3.025-2.8h2.6q1.2 0 1.463-.612t.262-.888t-.262-.887t-1.538-.613H9.825zm0-5.7h2.325q.825 0 1.2-.425t.375-.95q0-.6-.425-.975t-1.1-.375H9.825z'/%3E%3C/svg%3E");
	font-weight: bold;
}

.fa-italic::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 19v-2.5h4l3-9H8V5h10v2.5h-3.5l-3 9H15V19z'/%3E%3C/svg%3E");
	font-style: italic;
}

.fa-underline::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 21v-2h14v2zm7-4q-2.525 0-3.925-1.575t-1.4-4.175V3H9.25v8.4q0 1.4.7 2.275t2.05.875t2.05-.875t.7-2.275V3h2.575v8.25q0 2.6-1.4 4.175T12 17'/%3E%3C/svg%3E");
	text-decoration: underline;
}

.fa-align-left::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21v-2h18v2zm0-4v-2h12v2zm0-4v-2h18v2zm0-4V7h12v2zm0-4V3h18v2z'/%3E%3C/svg%3E");
}

.fa-align-center::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21v-2h18v2zm4-4v-2h10v2zm-4-4v-2h18v2zm4-4V7h10v2zM3 5V3h18v2z'/%3E%3C/svg%3E");
}

.fa-align-right::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 5V3h18v2zm6 4V7h12v2zm-6 4v-2h18v2zm6 4v-2h12v2zm-6 4v-2h18v2z'/%3E%3C/svg%3E");
}

.fa-list-ol::before {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 22v-1.5h2.5v-.75H4v-1.5h1.5v-.75H3V16h3q.425 0 .713.288T7 17v1q0 .425-.288.713T6 19q.425 0 .713.288T7 20v1q0 .425-.288.713T6 22zm0-7v-2.75q0-.425.288-.712T4 11.25h1.5v-.75H3V9h3q.425 0 .713.288T7 10v1.75q0 .425-.288.713T6 12.75H4.5v.75H7V15zm1.5-7V3.5H3V2h3v6zM9 19v-2h12v2zm0-6v-2h12v2zm0-6V5h12v2z'/%3E%3C/svg%3E");
}

.fa-list-ul::before {
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 19v-2h12v2zm0-6v-2h12v2zm0-6V5h12v2zM5 20q-.825 0-1.412-.587T3 18t.588-1.412T5 16t1.413.588T7 18t-.587 1.413T5 20m0-6q-.825 0-1.412-.587T3 12t.588-1.412T5 10t1.413.588T7 12t-.587 1.413T5 14m0-6q-.825 0-1.412-.587T3 6t.588-1.412T5 4t1.413.588T7 6t-.587 1.413T5 8'/%3E%3C/svg%3E");
	white-space: pre-wrap;
	display:inline-block;
	line-height: 0.5;
}

.fa-indent.fa-flip-horizontal::before {
	transform: rotate(180deg);
}

.fa-indent::before {
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21v-2h18v2zm8-4v-2h10v2zm0-4v-2h10v2zm0-4V7h10v2zM3 5V3h18v2zm0 11V8l4 4z'/%3E%3C/svg%3E");
	white-space: pre-wrap;
	display:inline-block;
	line-height: 0.5;
}

.fa-eraser::before {
	content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='m13.2 10.35l-2.325-2.325L7.85 5H20v3h-5.8zm6.6 12.25l-8.3-8.3l-2 4.7H6.225L9.2 12L1.4 4.2l1.4-1.4l18.4 18.4z'/%3E%3C/svg%3E");
	white-space: pre-wrap;
	display:inline-block;
	line-height: 0.5;
}
</style>

[fvilers]

I'll happily accept a PR for this.

[fvilers]

Version 0.4.0 has been published with this change. Thanks to all of you!