Search code examples
cssruby-on-railsiconsfont-awesomefroala

Froala Font Awesome Toolbar Icons Shown As Squares

Every now and then I dont even know where to start debugging anymore because i've tried so many things that i'm not sure what worked and what never even worked in the first place.

Screenshot of my toolbar

The problem: When i load a Froala text editor in my application, the editor loads fine, the content submitted through the editor even saves. But the toolbar icons (Font Awesome icons) all display as squares.

What I've tried:

  • The froala documentation says i should write all those "require"s in the application.css file so i tried changing my application.css.scss to application.css and it WORKS. But i have other sass files i need to import into my application file which is why i have it as application.css.scss
  • I installed Froala onto the project using the Froala Gem. The editor is initializing which means the require in require froala_editor.min.css is working. Shouldnt this mean my require font-awesome should be working and my icons in the toolbar should be displaying correctly?
  • I've also tried adding the Font Awesome cdn directly into the application layout but that didnt seem to change anything.
  • I've tried resetting the cache and using different browsers as well.

It's a very similar problem as this post but i think im doing everything i should be doing to load the font-awesome icons so i'm not sure where i'm going wrong!

Thank you for the help in advance and let me know if I can provide any additional information!

update: i am using froala v2 from this link, following these directions: https://www.froala.com/wysiwyg-editor/docs/framework-plugins/rails

application.css.scss:

/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *
 *= require_self
 *= require froala_editor.min.css
 *= require froala_style.min.css
 *= require font-awesome
 *= require plugins/char_counter.min.css
 *= require plugins/code_view.min.css
 *= require plugins/colors.min.css
 *= require plugins/emoticons.min.css
 *= require plugins/file.min.css
 *= require plugins/fullscreen.min.css
 *= require plugins/image_manager.min.css
 *= require plugins/image.min.css
 *= require plugins/line_breaker.min.css
 *= require plugins/quick_insert.min.css
 *= require plugins/table.min.css
 *= require plugins/video.min.css
 */
Solution

  • I traced the error back to css that i wrote to set the font-family of the <body> to a customized font-family. When i removed it, the squares started displaying as normal! I'm assuming this happens because the font-awesome icons dont know how to display the icons in any other font-family than the one it's created for?

    If someone can give me a clear explanation that would be awesome but give this troubleshooting a try if you're experiencing any similar issues!