摩纳哥编辑器缺少图标

Question

Moncao Editor (0.20) 中的图标丢失，它们在我的实例中仅显示为空白方块。为了让它们出现在我的 Vue (2.x) 应用程序中，我缺少什么？

在 Devtools > Elements 中，:before 伪类的 css 与“使用正则表达式”按钮类似。

在webpack.config.js（4.x）中，我在modules.rules下有这个

 { // monaco
    test: /\.ttf$/,
    use: ['file-loader']
  }

编辑：在 Devtools > Network 选项卡中，在 Monaco Editor's website 的游乐场中，我可以看到 codicon.ttf 是从 microsoft.github.io/node-modules/... 获取的，但在我的应用程序中没有。正在获取 ttf 文件。看来这就是问题的根源。初始化代码编辑器时如何获取它？

Answer 1

我认为图书馆使用

@fortawesome

。安装这个，因为你有 webpack v4

"@fortawesome/fontawesome-free": "^5.15.3",

您必须将其导入顶级应用程序文件

import "@fortawesome/fontawesome-free/css/all.min.css";

在 webpack.config.js 中

{
        test: /\.svg$/,
        use: [
          {
            loader: "svg-url-loader",
            options: {
              limit: 10000,
            },
          },
        ],
      },

还有

npm i svg-url-loader

Answer 2

我找到了解决我自己问题的方法。

我期望 monaco-editor 从 /node_modules 加载 codicon.ttf 文件（其中包含我需要的图标），但它不起作用。相反，我复制了 ttf 文件，将其放入我的资产文件夹（或我可以直接访问客户端应用程序的任何文件夹）中，然后在初始化代码编辑器的 vue 组件中调用它。

我的样式标签在 CodeEditor.vue 中如下所示：

<style>
  @font-face {
    font-family: "codicon";
    src: url(/app/font/codicon.ttf);
  }
  #monacoel {
    font-family: "codicon";
  }
</style>