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.
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 changingapplication.css.scss
application.css
, works. have other sass files need import application file why haveapplication.css.scss
- i installed froala onto project using froala gem. editor initializing means require in
require froala_editor.min.css
working. shouldnt meanrequire 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
Post a Comment