Summernote v0.8.15 图标未加载

Posted 2023-03-22

【中文标题】Summernote v0.8.15 图标未加载

【英文标题】：Summernote v0.8.15 icons not loading

【发布时间】：2020-04-27 17:36:03

【问题描述】：

我遇到了一个问题，即 Summernote 图标无法正确加载。 我该怎么做？

【参考方案1】：

在summernote 8.15 中正确加载图标 您需要将其包含在您的 css/scss 文件中

ex. css/fonts.scss
/* summernote 8.15 need to include it font-face*/

@font-face 
  font-family: "summernote";
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url('/fonts/font/summernote.eot');
  src: url('/fonts/font/summernote.eot?#iefix') format("embedded-opentype"), 
       url('/fonts/font/summernote.woff2') format("woff2"), 
       url('/fonts/font/summernote.woff') format("woff"), 
      url('/fonts/font/summernote.ttf') format("truetype");

然后在你的assets中，你需要复制summernote 8.15的fonts文件夹

assets/
- css/
  --fonts.scss
-fonts/
  --font/
    ---summernote.eot
    ---summernote.woff2
    ---summernote.woff
    ---summernote.ttf

请参阅 Summernote 文档https://summernote.org/

【参考方案2】：

这与您的字体文件不在正确的文件夹中有关。

默认情况下，summernote 期望 font 文件夹位于您加载 css 文件的同一文件夹中。

例如，对于/css/summernote.css，由于summernote.css 中给出的路径，字体应该在/css/font/summernote.eot 中

如果使用SCSS编译，可以通过更改summernote-icons.scss中的$sni-font-path来修改字体路径。

【参考方案3】：

打开summernote-bs4.min.js文件，替换不显示的图标

like：在文件 note-icon-chain-broken 之前和更改图标 fas fa-unlink 之后。

注意：这里您的项目支持 fas fa 或 fa fa 或任何其他根据替换图标。