# Some Awesome Icons doesn't work

**URL:** <https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196>\
**Category:** Dashboard\
**Created:** [19 November 2020 14:24 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196 "2020-11-19T14:24:00Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Manfred53](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@Manfred53](https://discourse.nodered.org/u/Manfred53)\
**Post date:** [19 November 2020 14:24 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/1 "2020-11-19T14:24:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [19 November 2020 15:09 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/2 "2020-11-19T15:09:34Z")

</div>

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?

> **[Font Awesome Icons](https://fontawesome.com/v4.7.0/icons/)**

I assume that the prefixes far, fal, fad are all v5 features.

---

<div class="post-metadata">

**Author:** ![Manfred53](https://avatars.discourse-cdn.com/v4/letter/m/7feea3/32.png) [@Manfred53](https://discourse.nodered.org/u/Manfred53)\
**Post date:** [19 November 2020 15:33 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/3 "2020-11-19T15:33:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [19 November 2020 16:02 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/4 "2020-11-19T16:02:32Z")

</div>

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](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](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801/7)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 November 2020 16:05 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/5 "2020-11-19T16:05:42Z")

</div>

Is this for online or offline use ?  
If always online then you can use the iconify online set eg  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/3/236cab74fe22d5fb4f46005a542e260f9c815b74.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/8/b8f22112f044f71e268ec731b83e7359dee7cc2b.png)  
or maybe iconify-fa-solid-car-battery if you prefer

If offline then you will need to use a locally stored image instead

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [19 November 2020 20:40 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/6 "2020-11-19T20:40:58Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 November 2020 20:56 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/7 "2020-11-19T20:56:37Z")

</div>

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)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [19 November 2020 21:16 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/8 "2020-11-19T21:16:59Z")

</div>

I've never used them, but is this how they are used @hotNipi ?

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [19 November 2020 21:27 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/9 "2020-11-19T21:27:56Z")

</div>

That is one and useful way - how to use them in `ui_template`. (including how to have iconify for the dashboard overall)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/4/b4570cc22b52462e1b06a2991db8fb43cbbbf9f7.png)

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [19 November 2020 21:30 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/10 "2020-11-19T21:30:00Z")

</div>

> [@Manfred53](#):
>
> I need 'far fa-bell'

Well, I'll say it:

Shouldn't that be `fa fa-bell` and not `far fa-bell`?

It caught me many a time.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [19 November 2020 21:36 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/11 "2020-11-19T21:36:09Z")

</div>

> [@Trying\_to\_learn](#):
>
> Shouldn't that be `fa fa-bell` and not `far fa-bell` ?

No, it's fa(regular) = `far`

![bell](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/3/03b6bd93710ed8a80b757ba29b880581dbcaee4d.jpeg)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [19 November 2020 21:43 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/12 "2020-11-19T21:43:56Z")

</div>

Apologies. Just that I have fallen for _typos_ with names more times than I care to mention.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [19 November 2020 22:56 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/13 "2020-11-19T22:56:51Z")

</div>

Font-Awesome 4.7 used fa.... Font Awesome 5 introduced far.  
We only have 4.7 built in.

---

<div class="post-metadata">

**Author:** ![Nodi.Rubrum](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nodi.rubrum/32/107482_2.png) [@Nodi.Rubrum](https://discourse.nodered.org/u/Nodi.Rubrum)\
**Post date:** [22 November 2020 03:21 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/15 "2020-11-22T03:21:17Z")

</div>

There is even FA 6.0 (alpha or beta) now too.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [22 December 2020 03:21 UTC](https://discourse.nodered.org/t/some-awesome-icons-doesnt-work/36196/16 "2020-12-22T03:21:19Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.