将自定义图标添加到 tinyMCE 按钮

Question

我正在尝试将一个 Font-Awsome 图标添加到我添加到 tinyMCE 的按钮中：

  ed.addButton('youtube', {
     title: 'Add Video' ,
     icon: 'icon-youtube',
     onclick: function () {
     //do stuff here...
 }

使用像文档建议的图像是不可接受的，但由于某种原因我无法完成这项工作。有任何想法吗？

原文由 Kepedizer 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个基于 CSS 的解决方案似乎运行良好：

  i.mce-i-[FONT-AWESOME-CLASSNAME]:before {   // FONT-AWESOME-CLASSNAME e.g. "icon-youtube"
    content: "[FONT-AWESOME-CONTENT]";       // FONT-AWESOME-CONTENT e.g. "\f166"
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 1.5em;
    padding-right: 0.5em;
    position: absolute;
    top: 15%;
    left: 0;
 }

它基于 matt-royal 在 此堆栈交换 wordpress 线程 上的回答

原文由 Kepedizer 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我知道这已经过时了，但我想我会为任何感兴趣的人提供答案。我正在使用 TinyMCE 4。我将其添加到我的 CSS

 .mce-ico.mce-i-fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

然后当我为我刚刚使用的按钮设置图标时。

 editor.addButton('adjust', {
    tooltip: 'Adjust Layout',
    icon: 'fa fa-adjust',
    onclick: function () {
        dialogLayout(editor, url, settings);
    }
});

基本上这会让你使用任何字体很棒的图标，而不必为每个图标都有一个特定的类布局。

希望这对某人有帮助。

原文由 Robert E. McIntosh 发布，翻译遵循 CC BY-SA 3.0 许可协议