# Return html / fa icon code in a function

**URL:** <https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074>\
**Category:** Dashboard\
**Created:** [6 December 2020 09:57 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074 "2020-12-06T09:57:25Z")\
**Posts on this page:** 20\
**Page:** 2

<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:** [9 December 2020 18:20 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/21 "2020-12-09T18:20:58Z")

</div>

> [@thomasvjohansen](#):
>
> the flow is a modification of this made by [KanyonKris](https://flows.nodered.org/user/KanyonKris):

Nice thing done 👍.  
Got some inspiration from it and adjusted the weather card on my dashboard to have a little more info.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/d/dd44806d265f8685aed25cc968ac6ffced28af4c.png)

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [10 December 2020 11:34 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/22 "2020-12-10T11:34:00Z")

</div>

> [@dceejay](#):
>
> the arrow points the way the wind is coming from... so a north wind is a downwards arrow = 0 degrees....

I've always thought on wind indicator, which acts like a wind vane, north was considered the top of a circle (as 0/360 degrees). So a north wind (wind coming from the north and going to the south) would be shown by the arrow pointing up - to the north.

A north`ward` wind sould be coming from the south and going to the north so in that case the arrow would point down.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 December 2020 11:48 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/23 "2020-12-10T11:48:52Z")

</div>

A northerly wind comes _from_ the North so the arrow should point N for a Northerly wind from the North.

---

<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:** [10 December 2020 11:51 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/24 "2020-12-10T11:51:39Z")

</div>

That dilemma exists since I don't know how long and probably stays forever.  
That's why I suggested to @Paul-Reed to add also the aliases in form of `wi-from-ne` and `wi-towards-ne`  
And everybody can be happy 🙂

---

<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:** [10 December 2020 11:56 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/25 "2020-12-10T11:56:14Z")

</div>

> [@hotNipi](#):
>
> That's why I suggested to @Paul-Reed to add also the aliases in form of...

...and which has been added to v1.6.0 - see [Add further aliases to rotations · Paul-Reed/weather-icons-lite@5de9f5f · GitHub](https://github.com/Paul-Reed/weather-icons-lite/commit/5de9f5f6e966c81593ff2b4c06249b11f216cbae)

I have not yet updated it to npm though. I need to finish the readme and see if there is any other feedback, and then maybe add it in the queue for a future dashboard update.

---

<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:** [10 December 2020 12:52 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/26 "2020-12-10T12:52:25Z")

</div>

I'll go with what the experts say....  
See UK Met Office  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/1/81f57f64b42dd076e20a34dcd7086b6431bd0653.png)  
UK BBC Weather  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/1/112c124343f86251dacf0106100c9fe867e14e68.png)  
Google  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/4/2470b58b8ce898fecbbd0a7cc1219838ea759600.png)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 December 2020 13:46 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/27 "2020-12-10T13:46:59Z")

</div>

It depends whether you are showing which direction a wind is blowing, using an arrow, or trying to represent a wind vane, which points into the wind.

---

<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:** [10 December 2020 14:27 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/28 "2020-12-10T14:27:50Z")

</div>

Well yes... I'm just saying that I have yet to see an online weather site use the "wind vane standard" ...

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [10 December 2020 14:56 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/29 "2020-12-10T14:56:41Z")

</div>

This is from the US National Weather service

 ![Screen Shot 2020-12-10 at 9.53.55 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1a18bbf0c757592ab412aa1c2c437f010d7a567a.jpeg)

I guess the answer is 'it depends'. There are many terms and devices describing wind direction so I’d say pick the one that fits your needs.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 December 2020 15:20 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/30 "2020-12-10T15:20:37Z")

</div>

Typical have to be different US - Just like date format MM/DD/YYYY to confuse the rest of the world 😉 🤪 😆

To me, those icons on that image look like a wind vane (and so the arrow points towards source of wind)

So definitely as @zenofmud - it depends.

In my head...

- If the icon looks like a wind vane (like an arrow with a tail), its pointing to the source of the wind.
- If its a simple arrow (like a windsock), I tend to think of it as pointing in the direction of wind travel.

More examples ...

Met Office  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/f/4fa03bb91db7c222ed0f9563cab948985b4f66ec.png)

[windy.com](https://www.windy.com/?54.900,-1.421,5)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/c/fc2a0282c1faf08ef2a0bab12bdfe0858fa6b7eb.jpeg)

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [10 December 2020 15:47 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/31 "2020-12-10T15:47:33Z")

</div>

> [@Steve-Mcl](#):
>
> Typical have to be different US

It is the same for meteorological charts the world over, eg

[https://www.lordgrey.org.uk/~f014/usefulresources/aric/Resources/Teaching\_Packs/Key\_Stage\_4/Weather\_Climate/08.html](https://www.lordgrey.org.uk/~f014/usefulresources/aric/Resources/Teaching_Packs/Key_Stage_4/Weather_Climate/08.html)

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [10 December 2020 16:02 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/32 "2020-12-10T16:02:53Z")

</div>

> [@Colin](#):
>
> same for meteorological charts the world over, eg

dont get me wrong Colin, agreed, if the symbols being discussed here were standard - but in this case ...

> [@dceejay](#):
>
> ![mJlsW5dSgI](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7b598aa83ef7d197acb917cfb27af0b9caecf293.gif)

... they are more like met office and other examples.

My mind says it is the direction of wind flow (i.e. looks more like a windsock than a wind vane)

---

<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:** [10 December 2020 16:03 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/33 "2020-12-10T16:03:37Z")

</div>

Not much to discuss about the wind if there is no weather to go surfing.  
Let us not forget that provided solution is not directly connected to wind direction. It is rotation logic for any `fa- wi-` icon which may freely be pointer type of icon but the logic doesn't care. It just adds some degrees of rotation to the icon. Even if part of it is represented with cardinals, still widely usable as the directional indicator.

---

<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:** [10 December 2020 16:55 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/34 "2020-12-10T16:55:33Z")

</div>

i would argue even the US one is still consistent.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/5/95b28a3de227aa6d11e4e4a90df1f41bfc8a42ad.png)  
The head of the arrow is bottom right - and the fletches/tail feathers are to the top left.  
The dot is the x,y spot on the ground where the measurement is and the line heads towards it.

---

<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:** [10 December 2020 18:54 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/35 "2020-12-10T18:54:57Z")

</div>

> [@dceejay](#):
>
> i would argue even the US one is still consistent

Consistently inconsistent is probably more accurate 😉

![wind](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a77c393026677e5f8631d3553857e680ecf24f89.jpeg)

> **[Vermont Wind Direction Map - Air Sports Net](https://www.usairnet.com/weather/maps/current/vermont/wind-direction/)**
>
> Vermont Wind Direction Map. Current Wind Direction map for Vermont. Weather map with the current Wind Direction for Vermont.

---

<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:** [10 December 2020 18:56 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/36 "2020-12-10T18:56:58Z")

</div>

The arrow still show where the wind is coming from....

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [10 December 2020 21:18 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/37 "2020-12-10T21:18:47Z")

</div>

> [@dceejay](#):
>
> The head of the arrow is bottom right

Ahhh I thougt block was the center and the shaft point to the direction of the wind.

@Paul-Reed If you look at the compass it says 'Wind data - 8 MPH 270° `from W`' So the arrow represents a wind sock not a wind vane.

And with that, I'm now clear on this and am out of this thread 👋

---

<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:** [12 December 2020 19:19 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/39 "2020-12-12T19:19:01Z")

</div>

@thomasvjohansen made a request to add, (do they call them _half-winds_?) to `weather-icons-lite`, and has kindly prepared a PR which will be merged into v1.6.0.  
This means that there will be 16 rotational values, for example N, NNE, NE, ENE, E, etc.

I have also prepared two wind direction indicators icons, which could be added to the icon files;

![arrows](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf4cf333fba4f5707787ab1c81c30df7048e2f5f.gif)

Please let me know if these icons would be of use, and if not, I'm open to ideas 👍

---

<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:** [12 December 2020 19:26 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/40 "2020-12-12T19:26:27Z")

</div>

As long the lite therm stays valid 😉

---

<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:** [12 December 2020 19:49 UTC](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074/41 "2020-12-12T19:49:15Z")

</div>

These additions add about 1.4k to the CSS (uncompressed state), and the icon file increase from 13,948B to 14,056B as the vector graphics are very lightweight.

It's still considerably smaller than the full weather-icons set, but yes, agree, I need to keep it lite.

[Previous page](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074.md?page=1)

[Next page](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074.md?page=3)
