search

froala / wysiwyg-editor

The next generation Javascript WYSIWYG HTML Editor.
https://www.froala.com/wysiwyg-editor
Other
5.27k stars 673 forks source link

Alignment and padding issues with Font Awesome Icons in V3 #3913

Open pomartel opened 4 years ago

pomartel commented 4 years ago

When using the Font Awesome Icons in V3, there are some alignment and padding problems.

Here is a JS Fiddle to reproduce the issue: https://jsfiddle.net/8cg3sdh0/

Try the Quick Insert bar in the demo and you will see that the icons are not aligned properly in the rounded bubbles.

Screen Shot 2020-05-08 at 10 13 42 AM

Click the Align icon and in the submenu, you will see that there is no padding between the left, center and right align icons.

Screen Shot 2020-05-08 at 10 12 23 AM

Another thing is that the selected style icon is not highlighted like it should be. So for exemple, if I select text and click the Bold icon, the icon does not turn blue like it should to show a selected state.

Screen Shot 2020-05-08 at 10 25 23 AM

All these problems seem to be related to the fact that styles are applied to the <svg> nodes directly in V3. Font Awesome uses <i> nodes instead.

scottblinch commented 4 years ago

Yeah, there's also alignment issues in the image manager: image

scottblinch commented 4 years ago

Here's a fiddle with CSS that I think fixes most of these issues: https://jsfiddle.net/546s1b7x/

I'll be using it until we get some official fixes.