css - Froala Font Awesome Toolbar Icons Shown As Squares -


every , dont know start debugging anymore because i've tried many things i'm not sure worked , never worked in first place.

screenshot of toolbar

the problem: when load froala text editor in application, editor loads fine, content submitted through editor saves. toolbar icons (font awesome icons) display squares.

what i've tried:

  • the froala documentation says should write "require"s in application.css file tried changing application.css.scss application.css , works. have other sass files need import application file why have application.css.scss
  • i installed froala onto project using froala gem. editor initializing means require in require froala_editor.min.css working. shouldnt mean require font-awesome should working , icons in toolbar should displaying correctly?
  • i've tried adding font awesome cdn directly application layout didnt seem change anything.
  • i've tried resetting cache , using different browsers well.

it's similar problem this post think im doing should doing load font-awesome icons i'm not sure i'm going wrong!

thank in advance , let me know if can provide additional information!

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

application.css.scss:

/*  * manifest file that'll compiled application.css, include files  * listed below.  *  * css , scss file within directory, lib/assets/stylesheets, vendor/assets/stylesheets,  * or plugin's vendor/assets/stylesheets directory can referenced here using relative path.  *  * you're free add application-wide styles file , they'll appear @ bottom of  * compiled file styles add here take precedence on styles defined in other css/scss  * files in directory. styles in file should added after last require_* statement.  * better create 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  */ 

i traced error css wrote set font-family of <body> customized font-family. when removed it, squares started displaying normal! i'm assuming happens because font-awesome icons dont know how display icons in other font-family 1 it's created for?

if can give me clear explanation awesome give troubleshooting try if you're experiencing similar issues!


Comments

Popular posts from this blog

asynchronous - C# WinSCP .NET assembly: How to upload multiple files asynchronously -

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

asp.net - Problems sending emails from forum -