我应该如何在 TwinCAT HMI 中使用图标字体？

问题描述

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

为此，我尝试在 TwinCAT HMI 项目中将 Google 的 Material Icons 库实现为字体。结果看起来像这样：

Fonts/MaterialIcons-Regular.woff2（本地托管的字体文件）

Fonts/Fonts.css 包含：

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'),local('MaterialIcons-Regular'),url(MaterialIcons-Regular.woff2) format('woff2');
}

Themes/Base/BaseStyle.css 包含各种类的样式定义

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px; /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: Nowrap;
  direction: ltr;
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
}
/* Rules for using icons using custom colors */
.material-icons.orange600 { 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 HMI 添加图标？是否有我缺少的 TwinCAT 图标框架？自定义 SVG 文件是要走的路吗？我应该只使用现代网络框架吗？

提前致谢。

解决方法

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

唯一令人恼火的是，Beckhoff 将 SVG 文件作为“src”放在一个标签中。这导致对于每个图标，如果需要，您应该使用特定颜色。这是 Beckhoff 的方式（参见 Beckhoff Twincat HMI 中包含的图像）。我想对 SVG 文件使用 fill 属性，但这不起作用。所以我根据以下内容实施了“黑客”：How to transform black into any given color using only CSS filters

html icons plc plc twincat