下载掌阅APP，畅读海量书库
立即打开
dashboard的UI小部件中的小图标有3种类型，分别是内置图标、联网图标和自建图标。具体使用方法如下。
dashboard模块内置了4组图标，具体如下。
· Angular Material Icons：例如send。
· Font Awesome 4.7：例如fa-fire、fa-2x（图标名称前加fa-前缀）。
· Weather Icons Lite：例如wi-wu-sunny。
· Material Design Iconfont：例如mi-alarm_on-note（图标名称前加mi-前缀）。
（1）Angular Material Icons
该图标库的访问地址是https://klarsys.github.io/angular-material-icons/，官网如图2-40所示。
其中，wb_incandescent图标如图2-41所示。
图2-40 Angular Material Icons官网
图2-41 wb_incandescent图标
寻找到图标以后将图标配置到dashboard的UI小部件如button小部件中使用，如图2-42所示。
设置好后，我们在UI界面可以看到图标的使用效果，如图2-43所示。
图2-42 在button设置中写入图标名称
图2-43 图标使用效果
（2）Font Awesome 4.7
该图标库的访问地址是https://fontawesome.com/v4/icons/。在这里，我们找到了想要用的图标thumbs-up，如图2-44所示。
图2-44 Font Awesome 4.7图标库
寻找到图标以后将图标配置到dashboard的UI小部件如button小部件中使用，如图2-45所示。
使用Font Awesome 4.7图标库时需要注意的是，一定要在图标名称前加fa-前缀，如fa-thumbs-up，否则系统找不到图标。使用效果如图2-46所示。
图2-45 在button设置中写入icon名称
图2-46 图标使用效果
（3）Weather Icons Lite
Weather Icons Lite是气象图标库，访问地址是https://github.com/Paul-Reed/weather-icons-lite/blob/master/css_mappings.md，如图2-47所示。
图2-47 Weather Icons Lite图标库
使用时，直接单击图2-47中的图标名称即可，如wi-wu-sunny。
（4）Material Design Iconfont
该图标库访问地址是https://jossef.github.io/material-design-icons-iconfont/，如图2-48所示。
图2-48 Material Design Iconfont图标库
使用时，先选中想要的图标，页面右侧会出现图标的名称，将其复制粘贴到dashboard的UI小部件（如button小部件）设置里。在名称设置时要在图标名称前加上mi-前缀，如mi-auto_stories。使用效果如图2-49所示。
图2-49 图标使用效果
iconify图标库必须连接到互联网才能使用，访问地址是https://icon-sets.iconify.design/，如图2-50所示。
图2-50 iconify图标库
使用iconify图标库时要注意3点。
1）在图标设置时必须在图标名称前加前缀iconify-，如iconify-mdi:car-battery。
2）指定图标大小可以选择以标准px或em作为单位来指定，默认为24px，例如iconify-mdi:car-battery 48px。
3）你还必须添加一个ui_template节点，以将必要的iconify库加载到仪表板的页面头部。ui_template节点的配置如表2-2所示。
表2-2 ui_template节点的配置
加载iconify库的ui_template节点可以放在任何一个流程面板中，设置后所有流程面板中的节点就都可以使用iconify库中的图标了。使用的时候可以设置是否和文字并排或者换行，具体是设置icon-inline属性，如：
还可以根据需要改变图标的颜色、角度、大小等，例如：
你还可以使用Icofont创建自己的图标集。下载Icofont后，你可以通过Node-RED在本地提供这些自定义图标的css文件，并使用ui_template节点将它们添加到仪表板页面的头部，例如：
你可以按照上面的方法通过添加icofont-前缀（如icofont-badge）使用图标，或者只是在ui_template节点中使用它们：
