如何在TinyMCE 6中使用Font Awesome 6 Pro并打包其CSS文件？

步骤1：补全Font Awesome Pro依赖包 #

你已安装部分Pro图标包，若需要更多Pro风格（如Regular、Light），可补充安装对应包：

npm install @fortawesome/fontawesome-pro @fortawesome/pro-regular-svg-icons @fortawesome/pro-light-svg-icons --save

（仅需Solid风格可跳过此步）

步骤2：创建自定义样式入口文件 #

在项目中新建fontawesome-pro.css（或.scss）文件，导入Pro图标核心及对应风格样式：

/* 导入Font Awesome核心基础样式 */
@import '@fortawesome/fontawesome-pro/css/fontawesome.css';
/* 导入Pro Solid风格样式 */
@import '@fortawesome/fontawesome-pro/css/solid.css';
/* 按需添加其他Pro风格样式 */
@import '@fortawesome/fontawesome-pro/css/regular.css';
@import '@fortawesome/fontawesome-pro/css/light.css';

步骤3：配置Webpack打包CSS #

确保Webpack配置包含CSS/字体文件处理规则，提取单独的CSS文件：

示例Webpack配置片段 #

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      // 处理CSS文件
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader'
        ]
      },
      // 若用SCSS，添加SCSS处理规则
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      },
      // 处理Font Awesome字体资源
      {
        test: /\.(woff2?|eot|ttf|otf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash][ext]'
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'fontawesome-pro.css' // 指定输出的CSS文件名
    })
  ]
};

步骤4：在TinyMCE中引用打包后的CSS #

将Webpack生成的fontawesome-pro.css路径配置到TinyMCE的content_css：

options = {
  content_css: [
    './dist/fontawesome-pro.css' // 替换为实际打包输出路径
  ]
}

额外说明 #

• 若只需特定Pro图标而非全部，可通过Font Awesome树摇功能减小体积：在JS文件中导入目标图标并调用library.add()注册，但这种方式适合SVG核心场景；若要在TinyMCE内容中通过类名（如fa-solid fa-user）使用图标，仍推荐上述CSS打包方案。
• 确保通过官方授权的npm源安装Pro包，否则无法获取Pro专属CSS文件。

内容的提问来源于stack exchange，提问作者netdjw