css - Froala Font Awesome 工具栏图标显示为正方形

标签 css ruby-on-rails icons font-awesome froala

时不时地,我什至不知道从哪里开始调试,因为我已经尝试了很多东西,以至于我不确定什么有效,什么从来没有起作用。

Screenshot of my toolbar

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

我尝试过的:

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

这是一个与 this post 非常相似的问题但我认为我正在做我应该做的一切来加载 Font Awesome 图标,所以我不确定我哪里出错了!

提前感谢您的帮助,如果我可以提供任何其他信息,请告诉我!

更新:我正在使用此链接中的 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
 */

最佳答案

我将错误追溯到我为设置 <body> 的字体系列而编写的 css到自定义的字体系列。当我删除它时,方 block 开始正常显示!我假设发生这种情况是因为 Font Awesome 图标不知道如何在为其创建的字体系列之外的任何其他字体系列中显示图标?

如果有人能给我一个清晰的解释,那就太棒了,但如果您遇到任何类似的问题,请试试这个故障排除!

关于css - Froala Font Awesome 工具栏图标显示为正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40523183/

相关文章:

javascript - Google map 默认图标

html - 如何在 agm-map 的特定位置显示自定义 DOM 元素

java - 仅显示没有图标的 JComboBox 所选项目文本?

javascript - 悬停固定的 div 可防止在 div 内滚动

ruby-on-rails - 使用 Rails 上传 Word、PDF

ruby-on-rails - 事件登记表

ruby-on-rails - 使用 Sinatra 和 Datamapper 的虚拟属性

asp.net - 寻找图标商店

css - 2个不同大小的div居中

html - 如何在html中创建可滚动的下拉列表