TinyMCE 中的图标是如何工作的?
How do the icons in TinyMCE work?
我似乎无法在互联网上找到任何关于此的信息,但是 TinyMCE 4 中的图标是如何工作的?
我知道我可以按名称为按钮指定图标并为我的自定义按钮指定自定义图标,但是如果我想使用其中一个标准图标,在图像编辑应用程序中修改它,然后将其另存为自定义图标。我在哪里可以获得该图标的源图像?我在哪里可以看到可用图标及其名称的完整列表?
因此,这可能是对我自己的问题的部分回答,或者至少是我根据 TinyMCE 4 这方面目前存在的糟糕文档设法理解的内容。
TinyMCE 4.x 中的图标使用自定义 IcoMoon 字体。此字体的文件位于 skins//fonts 目录中。
如果您 download the TinyMCE Dev Package,您可以在 js/tinymce/skins/lightgray/Icons 中找到所有适用于该特定皮肤的图标,您将能够将这些图标用于您的自定义按钮(如果您正在使用那个皮肤)。
您需要在“-i-”和“:before”之间使用单词。例如如果 Icons.less 中的定义是:
.@{prefix}-i-alignleft:before
您可以使用关键字 alignleft
作为自定义按钮的图标。
我还没有向默认设置添加更多图标,但我想这将涉及创建一个新主题,希望从父主题继承,并定义您自己的 Icons.less 文件和然后处理该 LESS 文件以生成适合您主题的 CSS。
我似乎无法在互联网上找到任何关于此的信息,但是 TinyMCE 4 中的图标是如何工作的?
我知道我可以按名称为按钮指定图标并为我的自定义按钮指定自定义图标,但是如果我想使用其中一个标准图标,在图像编辑应用程序中修改它,然后将其另存为自定义图标。我在哪里可以获得该图标的源图像?我在哪里可以看到可用图标及其名称的完整列表?
因此,这可能是对我自己的问题的部分回答,或者至少是我根据 TinyMCE 4 这方面目前存在的糟糕文档设法理解的内容。
TinyMCE 4.x 中的图标使用自定义 IcoMoon 字体。此字体的文件位于 skins//fonts 目录中。
如果您 download the TinyMCE Dev Package,您可以在 js/tinymce/skins/lightgray/Icons 中找到所有适用于该特定皮肤的图标,您将能够将这些图标用于您的自定义按钮(如果您正在使用那个皮肤)。
您需要在“-i-”和“:before”之间使用单词。例如如果 Icons.less 中的定义是:
.@{prefix}-i-alignleft:before
您可以使用关键字 alignleft
作为自定义按钮的图标。
我还没有向默认设置添加更多图标,但我想这将涉及创建一个新主题,希望从父主题继承,并定义您自己的 Icons.less 文件和然后处理该 LESS 文件以生成适合您主题的 CSS。