在TinyMCE 6中添加FontAwesome图标却无法显示的问题

你遇到的问题核心在于FontAwesome下载的SVG和TinyMCE官方示例SVG有两个关键差异：

• 尺寸适配问题：FontAwesome的SVG默认是大尺寸（576x512），没设置适合按钮图标的小尺寸，也没配置缩放规则，导致图标在TinyMCE的按钮容器里被缩得看不见。
• 颜色继承问题：FontAwesome的SVG缺少fill="currentColor"属性，无法继承TinyMCE按钮的文字颜色，导致图标和背景色一致，看起来像是没显示。

直接修改你传入的SVG代码即可解决：

editor.ui.registry.addIcon('customIcon', '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 576 512" fill="currentColor"><path d="M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z"/></svg>');

editor.ui.registry.addToggleButton('myToggleButton', {
  icon: 'customIcon',
  onAction: function() {
    // 你的按钮逻辑
  }
});

修改说明： #

1. 添加width="24"和height="24"：让SVG适配TinyMCE按钮图标的默认尺寸（和官方示例一致）。
2. 添加fill="currentColor"：让SVG的填充色继承按钮的文字颜色，确保图标清晰可见。
3. 保留原viewBox：保证图标缩放时不会变形。

这样修改后，FontAwesome的星形图标就能正常显示在TinyMCE的按钮上了。

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