如何在TwinCAT人机界面中使用图标字体？

Question

为了用定制的颜色和变体来代替编辑和保存.svg文件副本的繁琐工作，我决定尝试使用现代图标库是很好的选择。

为此，我尝试在TwinCAT人机界面项目中，将谷歌的材料图标库作为一个字体来实现。结果如下所示：

• Fonts/MaterialIcons-Regular.woff2 (本地托管字体file)
• Fonts/Fonts.css )包含：@字体-face{字体族：‘MaterialIcon’；字体样式:普通字体；字体重量: 400；src:本地字体(‘MaterialIcon’)、本地字体(‘MaterialIcons Regular.woff2)格式(’woff2‘)；}

• Themes/Base/BaseStyle.css包含各种类的样式定义。材质-图标{字体-系列：‘物质图标’；字体重量:正常；字体样式:正常；字体大小:24 ltr；/*首选图标大小*/ display:内联块；行高: 1；文本转换:无；字母间距:普通；字词-包装:正常；空白:现在；方向:ltr；/*对所有WebKit浏览器的支持。*/ -webkit-字体平滑:反别名；/*支持Safari和Chrome。*/文本呈现: optimizeLegibility；/*支持火狐。*/ -moz-osx-字体平滑:灰度；}使用自定义颜色*/ . /*的图标规则*/..material icons.orange 600{ color：#FB8C00；}

这允许我定义一个TcHmiHtmlHost，创建一个元素，并查看！

<div id="material_icon_622" data-tchmi-type="TcHmi.Controls.System.TcHmiHtmlHost" data-tchmi-grid-row-index="2" data-tchmi-width="30" data-tchmi-height="30">
  <span class="material-icons md-dark ">face</span>
</div>

然而，我需要定义和自定义一个HTML主机，每次我用这种方式使用一个符号.

人们还尝试了哪些其他方法来有效地在他们的TwinCAT人机界面中添加图标呢？是否有我缺少的TwinCAT图标框架？定制SVG文件是要走的路吗？我应该只使用一个现代的网络框架吗？

提前谢谢。

Answer 1

我们使用SVG文件作为图标。这是灵活的，有大量的图标已经可用。

唯一令人恼火的是贝克霍夫将SVG文件作为'src‘标记。这样做的结果是，如果需要的话，每个图标都应该有特定颜色的图标。这是贝克霍夫的方法(见贝克霍夫在Twincat中包含的图像)。我想对SVG文件使用fill属性，但是这不起作用。因此，我根据：How to transform black into any given color using only CSS filters实现了一个'hack‘