I have some problems with Awesome Icons. For the side menu I want to use the fa-car-battery icon, but it doesn't work. All other battery icons work, but they are version 5.0.0 and the car battery icon is 5.2.0. MAy be it is a version issue. Does anyone know how I can update the font?
Another problem is the bell icon. If I write 'fa-bell' inti the icon field it works, but 'fas fa-bell' and all other with a prefix (far, fal, fad) doesn't work.
As far as I'm aware, node-RED currently uses font awesome 4.7, so are you sure that you are using icons that were published by v4 .7?
I assume that the prefixes far, fal, fad are all v5 features.
I need 'far fa-bell' and 'fas fa-car-battery'. 'fa-bell' is a full filled bell and 'far fa-bell' has only the outline of the bell. This not so important, but I need the car battery.
All I can suggest is to load the v5 icon subset by using a cdn as described - https://fontawesome.com/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont
If you search the forum, you will find examples of how that can be done in node-RED, for example - Help with icon in `text` node
Is this for online or offline use ?
If always online then you can use the iconify online set eg
or maybe iconify-fa-solid-car-battery if you prefer
If offline then you will need to use a locally stored image instead
Check the alternate names as well, I came across one case where the alternate name worked, but the actual name did not. This was fixed in due course, but it might be a similar issue?
Current case is clear as the wanted icon is out of range of any offline icon set the dashboard provides. And yes, for the online case the iconify choice is the best one. Sadly I couldn't find any description in docs to describe how to use iconify icons. My skills of search may of course can be limited. But seems like it is hidden treasure of dashboard until somebody with well enough English skills takes to write it up. And again with my skills I'm not qualified.
Hope somebody takes it from this point, cos it really is good addition to dashboard (for online case)
I've never used them, but is this how they are used @hotNipi ?
[{"id":"c2bdb6c6.63a548","type":"ui_template","z":"c53060.842a0fa","group":"61d2dced.3db8f4","name":"","order":163,"width":0,"height":0,"format":"<script src=\"https://code.iconify.design/1/1.0.7/iconify.min.js\"></script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":400,"y":1310,"wires":[[]]},{"id":"b4eab475.3033c8","type":"ui_template","z":"c53060.842a0fa","group":"61d2dced.3db8f4","name":"","order":164,"width":"3","height":"3","format":"<span class=\"iconify\" data-icon=\"noto:bird\" data-height=\"180\"></span>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":400,"y":1350,"wires":[[]]},{"id":"61d2dced.3db8f4","type":"ui_group","name":"flowtest","tab":"3c94630c.13381c","order":1,"disp":true,"width":16,"collapse":false},{"id":"3c94630c.13381c","type":"ui_tab","name":"Test","icon":"dashboard","order":9}]
That is one and useful way - how to use them in ui_template. (including how to have iconify for the dashboard overall)
The description in docs should have more basic use cases covered in clear way so the beginner could understand. Edge cases and tricks of course is for community to cover in forum but basics is must.
Well, I'll say it:
Shouldn't that be fa fa-bell and not far fa-bell?
It caught me many a time.
No, it's fa(regular) = far
Apologies. Just that I have fallen for typos with names more times than I care to mention.
Font-Awesome 4.7 used fa.... Font Awesome 5 introduced far.
We only have 4.7 built in.
There is even FA 6.0 (alpha or beta) now too.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
