Question

如何使用节点红色仪表板按钮中的Material Design图标更改图标大小？使用Font Awesome图标，它非常容易实现。例如fa-car fa-4x。

Answer 1

在node-red-dashboard（截至2018年6月）中似乎无法实现。

由于Font Awesome通过在图标旁边添加一个额外的类（即<i class="fa fa-car fa-4x"></i>）来更改图标大小，因此您可以在节点的图标字段中添加大小类，然后将其插入图标的名称旁边的UI中

但是，Material Design通过向图标的 parent 元素添加类（即<i class="material-icons md-24">face</i>）或将尺寸嵌入图标的SVG容器中来更改图标的大小。您可以在node-red-dashboard“ icon”字段中提供的唯一值是图标的名称，因此无法访问修改大小所需的HTML元素。

在node-red-dashboard中渲染时，Material Design“主页”图标的外观如下：

<ng-md-icon ng-if="iconType==='angular-material'" icon="home" class="ng-scope">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
  </svg>
</ng-md-icon>

您也许可以添加一些自定义CSS来定位SVG元素并更改viewBox，宽度和高度，但是您最多只能全局更改所有图标的大小（或可能更改所有特定类型的图标），并且将无法控制单个图标。

节点红色的材料设计图标大小

1 个答案: