# Return html / fa icon code in a function
**URL:** \
**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:** 1
I want to show the wind direction from openweathermap by a fa-icon but the function outputs degrees.
I have a function which outputs "90" degrees.
I want to convert this to a fa-icon + rotation and save it in a datacell which is later picked up by a template.
but since this datacell have multiple data I cant do the format in template.
so can the fa icon be inserted in the function?
tried this but not working
```auto
data05: {
cell01: msg.payload.hourly[1].wind_cardinal = '
Maybe you can find some useful tips from this thread [Help with icon in `text` node](https://discourse.nodered.org/t/help-with-icon-in-text-node/34801)
---
> [@thomasvjohansen](#):
>
> I want to show the wind direction from openweathermap
I just wanted to say that there is more and easy ways to do this.
But to understand what is not working in your case, it takes more than that object you have shared.
Make a simple flow with some data injected and the template where the result should be used.
---
Im modifying a weather flow, which pulls data from openweathermap.
the flow collects data and formats data into table cells, in this case "cell01".
Then a template node picks up everything in data.cell01, but it contains multiple values so it cant be formated in the template.
Though I can see that the cloud icons are generated in the template but cant figure out how to extend that to convert directions to icons.
The icon that could be used is "fa-location-arrow fa-rotate-90".
this is the complete flow but had to remove my openweathermap api key.
It is the function "format forecast data" and template "forecast 6 hours"
```auto
[{"id":"5f633a28.607134","type":"tab","label":"OWM Landscape","disabled":false,"info":""},{"id":"180a101a.9cd43","type":"ui_button","z":"5f633a28.607134","name":"IconRefresh","group":"70fb931.dfc146c","order":1,"width":3,"height":2,"passthru":false,"label":"","tooltip":"Refresh","color":"","bgcolor":"#17334d","icon":"fa-refresh fa-8x","payload":"true","payloadType":"bool","topic":"","x":990,"y":300,"wires":[["c5efdf55.db32f"]]},{"id":"9c052db7.3c434","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":3,"width":3,"height":1,"name":"Description","label":"","format":"{{msg.payload.current.weather[0].description}}","layout":"row-center","x":990,"y":60,"wires":[]},{"id":"ec4eb2d0.974c","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":5,"width":4,"height":1,"name":"Wind","label":"","format":"{{msg.payload.current.wind_speed}} {{msg.payload.current.wind_cardinal}}","layout":"row-right","x":970,"y":140,"wires":[]},{"id":"40f44662.3ecde8","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":7,"width":3,"height":1,"name":"SunriseTime","label":"","format":" {{msg.payload.current.sunrise}}","layout":"row-center","x":990,"y":180,"wires":[]},{"id":"5b97953.01fdd6c","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":6,"width":3,"height":1,"name":"SunsetTime","label":"","format":" {{msg.payload.current.sunset}}","layout":"row-center","x":990,"y":220,"wires":[]},{"id":"d284ed2f.c15c8","type":"comment","z":"5f633a28.607134","name":"OpenWeatherMap One Call API for Weather and Forecast","info":"","x":270,"y":40,"wires":[]},{"id":"9dbf3c95.67c74","type":"ui_template","z":"5f633a28.607134","group":"70fb931.dfc146c","name":"Forecast 6 hours","order":8,"width":6,"height":4,"format":"
Couldn't do much without the data but just by reading the code I think you should do following:
In that template you'll need to make that text row to include the icon tag
And from function feed the degree
---
thx your example pushed me the right way to do it, though realized afterwards that the icons only can be rotated in 4 directions, 0/90/180/270....
I need atleast 8 directions, so now im looking for a solution to that.
---
The thread I suggested leads to weather-icons-wind from where you can actually get directional icons for full 360 degrees. Or for cardinals if you want. And you can choose the pointer direction even for wind blowing towards or from.
> **[Weather Icons - 222 font icons inspired by Font Awesome and designed for...](https://erikflowers.github.io/weather-icons/)**
> **[cdnjs - The #1 free and open source CDN built to make life easier for developers](https://cdnjs.com/libraries/weather-icons)**
>
> Simple. Fast. Reliable. Content delivery at its finest. cdnjs is a free and open-source CDN service trusted by over 10% of websites, powered by Cloudflare. We make it faster and easier to load library files on your websites.
---
thx
now it works.
rewrote the degree section to eight names with correct degrees.
the eight names fits material design icon names.
```auto
if (deg>22.50 && deg<=67.50){
return "north_east";
}else if (deg>67.51 && deg<112.50){
return "east";
}else if (deg>112.51 && deg<157.50){
return "south_east";
}else if (deg>157.51 && deg<202.50){
return "south";
}else if (deg>202.51 && deg<247.50){
return "south_west";
}else if (deg>247.51 && deg<292.50){
return "west";
}else if (deg>292.51 && deg<337.50){
return "north_west";
}else{
return "north";
}
```
and then added the material icons in the template
```auto
```
here is the flow
```auto
[{"id":"5f633a28.607134","type":"tab","label":"OWM Landscape","disabled":false,"info":""},{"id":"180a101a.9cd43","type":"ui_button","z":"5f633a28.607134","name":"IconRefresh","group":"70fb931.dfc146c","order":1,"width":3,"height":2,"passthru":false,"label":"","tooltip":"Refresh","color":"","bgcolor":"#17334d","icon":"fa-refresh fa-8x","payload":"true","payloadType":"bool","topic":"","x":990,"y":300,"wires":[["c5efdf55.db32f"]]},{"id":"9c052db7.3c434","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":3,"width":3,"height":1,"name":"Description","label":"","format":"{{msg.payload.current.weather[0].description}}","layout":"row-center","x":990,"y":60,"wires":[]},{"id":"ec4eb2d0.974c","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":5,"width":4,"height":1,"name":"Wind","label":"","format":"{{msg.payload.current.wind_speed}} {{msg.payload.current.wind_cardinal}}","layout":"row-right","x":970,"y":140,"wires":[]},{"id":"40f44662.3ecde8","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":7,"width":3,"height":1,"name":"SunriseTime","label":"","format":" {{msg.payload.current.sunrise}}","layout":"row-center","x":990,"y":180,"wires":[]},{"id":"5b97953.01fdd6c","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":6,"width":3,"height":1,"name":"SunsetTime","label":"","format":" {{msg.payload.current.sunset}}","layout":"row-center","x":990,"y":220,"wires":[]},{"id":"d284ed2f.c15c8","type":"comment","z":"5f633a28.607134","name":"OpenWeatherMap One Call API for Weather and Forecast","info":"","x":270,"y":40,"wires":[]},{"id":"9dbf3c95.67c74","type":"ui_template","z":"5f633a28.607134","group":"70fb931.dfc146c","name":"Forecast 6 hours","order":8,"width":6,"height":4,"format":"\n
","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":980,"y":400,"wires":[[]]},{"id":"30342c8c.30450c","type":"debug","z":"5f633a28.607134","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":770,"y":560,"wires":[]},{"id":"8d7cf800.2eb93","type":"ui_text","z":"5f633a28.607134","group":"70fb931.dfc146c","order":4,"width":2,"height":1,"name":"Humidity","label":"","format":"{{msg.payload.current.humidity}}","layout":"col-center","x":980,"y":260,"wires":[]},{"id":"70fb931.dfc146c","type":"ui_group","name":"MainGroup","tab":"4bb34f67.69a87","order":1,"disp":false,"width":6,"collapse":false},{"id":"4bb34f67.69a87","type":"ui_tab","name":"Weather","icon":"wi-wu-partlycloudy","order":2,"disabled":false,"hidden":false}]
```
the flow is a modification of this made by [KanyonKris](https://flows.nodered.org/user/KanyonKris):
> **[OpenWeatherMap Weather Dashboard with Icons - Landscape (flow) - Node-RED](https://flows.nodered.org/flow/d7af9f5d6f6923324466c58ea4f0655f/in/EK1nymdLJ3n0)**
---
> [@dceejay](#):
>
> Sounds like a job for @Paul-Reed 🙂
OP was using Font Awsome icons, and of course we have no direct control over FA's css files to add rotation values other than the default 90/180/270 degrees, as it is part of your dashboard build.
But there is no reason why we cant use `font-awsome` icons, and `weather-icons-lite` css like this;
``
So instead of duplicating the icon in weather-icons-lite, I could just [add a few additional lines of css](https://github.com/Paul-Reed/weather-icons-lite/commit/74ef8d0b0dbe36395107ac45ef1b27a5072653b3) to include **45** /90/ **135** /180/ **225** /270/ **315** degrees, and then that would be also available to the full set of font-awsome icons, allowing any icon to be rotated in 45 deg increments.
Thoughts?
---
Make it so ! (Or feel free to also add your wind arrow to the lite set). And/or should there also be aliases. wi-rotate-NE. Etc to make it easy to create from ordinals.
---
> [@dceejay](#):
>
> Make it so !
Done.
v1.4.0 is now on npm with the 45 deg changes.
> [@dceejay](#):
>
> And/or should there also be aliases. wi-rotate-NE. Etc to make it easy to create from ordinals.
Aah, sorry, I didn't know that you had edited your post until now..
I can add that, but for example, the FA icon mentioned above is positioned by default at 45deg.
so adding `wi-rotate-S` would result in;
---
errr - well yes - but if you pick fa-arrow-down then it works ok... and/or if you did add your own arrow it could be made to work without any fa interaction 🙂
---
> [@dceejay](#):
>
> but if you pick fa-arrow-down then it works ok
Just to be clear...
Should we assume that the icon's default orientation is 0 deg, and therefore applying `wi-rotate-NE` should rotate the icon 45 deg?
Just wondered when you mentioned `fa-arrow-down` ?
---
the arrow points the way the wind is coming from... so a north wind is a downwards arrow = 0 degrees.... so yes NE wind is rotate clockwise 45 and the tip of the arrow points to SW...
---
So thanks to Paul we will have wi-rotate-0, 45, 90 etc and wi-rotate-N, NE, .. which all work with fa-arrow-down as they assume 0 degrees is a north wind...
I also forgot we can of course just apply css styles dynamically as well - eg
```auto
[{"id":"c6e0b0d4.efd7b","type":"ui_template","z":"ab9333b5.f44f6","group":"61ae4ef4.28011","name":"","order":10,"width":"1","height":"1","format":"","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":580,"y":520,"wires":[[]]},{"id":"97f4ec25.ab953","type":"template","z":"ab9333b5.f44f6","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"","output":"str","x":420,"y":520,"wires":[["c6e0b0d4.efd7b"]]},{"id":"3bd7a6.e387c85a","type":"ui_slider","z":"ab9333b5.f44f6","name":"","label":"slider","tooltip":"","group":"61ae4ef4.28011","order":10,"width":"5","height":"1","passthru":true,"outs":"all","topic":"","min":0,"max":"359","step":1,"x":270,"y":520,"wires":[["97f4ec25.ab953"]]},{"id":"61ae4ef4.28011","type":"ui_group","name":"Group 1","tab":"5c9690fd.741cc","order":1,"disp":true,"width":"6","collapse":false},{"id":"5c9690fd.741cc","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
[Next page](https://discourse.nodered.org/t/return-html-fa-icon-code-in-a-function/37074.md?page=2)