Question

偶尔我甚至都不知道从哪里开始调试，因为我已经尝试了很多东西，以至于我不确定哪些是有效的，哪些甚至从未起作用。

Screenshot of my toolbar

问题：当我在我的应用程序中加载Froala文本编辑器时，编辑器加载正常，通过编辑器提交的内容甚至可以保存。但工具栏图标（Font Awesome图标）都显示为正方形。

我尝试了什么：

froala文档说我应该在application.css文件中写下所有这些＆＃34;要求＆＃34; s，所以我尝试将application.css.scss更改为application.css并且它可以工作。但我有其他sass文件，我需要导入我的应用程序文件，这就是为什么我有application.css.scss
我使用Froala Gem将Froala安装到项目中。编辑器正在初始化，这意味着require froala_editor.min.css中的需求正在运行。这不应该意味着我的require font-awesome应该正常工作，工具栏中的图标应该正确显示吗？
我也尝试将Font Awesome cdn直接添加到应用程序布局中，但似乎没有任何改变。
我已尝试重置缓存并使用不同的浏览器。

这是一个与this post非常相似的问题，但我认为我正在做我应该做的一切来加载字体 - 真棒图标，所以我不知道我哪里出错了！

感谢您提前获得帮助，如果我能提供任何其他信息，请与我们联系！

更新：我正在按照以下说明使用此链接中的froala v2：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
 */

Answer 1

我将错误追溯到css，我写了将<body>的font-family设置为自定义字体系列。当我删除它时，正方形开始正常显示！我假设发生了这种情况，因为字体很棒的图标不知道如何在任何其他字体系列中显示图标而不是它创建的图标？

如果有人可以给我一个明确的解释，但是如果您遇到任何类似的问题，请尝试进行此故障排除！

Froala字体真棒工具栏图标显示为正方形

1 个答案: