TinyMCE 中的图标是如何工作的？答案

【问题标题】：How do the icons in TinyMCE work?TinyMCE 中的图标是如何工作的？
【发布时间】：2017-01-05 15:25:54
【问题描述】：

我似乎无法在互联网上找到任何相关信息，但 TinyMCE 4 中的图标是如何工作的？

我知道我可以按名称为按钮指定图标，并为我的自定义按钮指定自定义图标，但如果我想采用其中一个标准图标，在图像编辑应用程序中对其进行修改，然后将其另存为自定义图标怎么办.我在哪里可以获得该图标的源图像？在哪里可以查看可用图标及其名称的完整列表？

【问题讨论】：

你检查过这里archive.tinymce.com/wiki.php/Tutorials:Creating_a_skin吗？
谢谢，有用的链接是一个很好的起点，让我继续前进。尽管我认为在此站点上提供一个全面的答案来解释图标的工作原理会更好。链接页面的内容似乎有点简洁。
您是否还费心阅读文档？它明确指出“您可以通过上传“icomoon.dev.svg”文件来导入现有的 TinyMCE 图标，然后添加更多图标或更改我们使用的图标。添加更多图标需要您更改 Icons.less 文件和 Icons.ie7 .less 文件。”如果你真的想深入了解它是如何工作的，请访问他们的 github 页面github.com/tinymce
是的，我确实费心阅读文档。堆栈溢出是一个以问答格式编译知识的网站，因此鼓励提出问题以获得适当的答案。你为什么不添加一个答案。感谢您的评论。

标签： tinymce-4

【解决方案1】：

因此，这可能是对我自己的问题的部分回答，或者至少是我根据 TinyMCE 4 这方面目前存在的糟糕文档而设法理解的部分答案。

TinyMCE 4.x 中的图标使用自定义IcoMoon 字体。此字体的文件位于 skins//fonts 目录中。

如果您download the TinyMCE Dev Package，您可以在 js/tinymce/skins/lightgray/Icons.less 中找到该特定皮肤可用的所有图标，您将能够将这些图标用于您的自定义按钮（如果您正在使用该皮肤）。

您需要使用“-i-”和“:before”之间的词。例如如果 Icons.less 中的定义是：

.@{prefix}-i-alignleft:before

您可以使用关键字alignleft 作为自定义按钮的图标。

我还没有为默认设置添加更多图标，但我想这将涉及创建一个新主题，希望从父主题继承，并定义你自己的 Icons.less 文件，然后处理那个 LESS文件为您的主题生成适当的 CSS。

【讨论】：