# Stuck getting weather icons-lite working

**URL:** <https://discourse.nodered.org/t/stuck-getting-weather-icons-lite-working/32370>\
**Category:** Dashboard\
**Created:** [2 September 2020 23:12 UTC](https://discourse.nodered.org/t/stuck-getting-weather-icons-lite-working/32370 "2020-09-02T23:12:07Z")\
**Posts on this page:** 8\
**Page:** 1

<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:** [2 September 2020 23:12 UTC](https://discourse.nodered.org/t/stuck-getting-weather-icons-lite-working/32370/1 "2020-09-02T23:12:07Z")

</div>

Quick back story:  
A **long** time ago I got `weather icons` installed and working on an early machine.

It (the icons) are working. Details: NR 1.0.3 Dashboard 2.20.0

Now:  
I want to get the icons working on another machine.  
NR 1.1.3 Dashboard: 2.23.2  
Only updated the other day. (I forgot I updated it, but did it because this machine is now going to be needed and it hasn't been used for a long time, so I thought it would be a good thing to get it up to date.)

I exported the small part of the flow from the old machine and imported it.  
(At this stage no `CSS` node was taken and no other fancy stuff was done)

The imported flow didn't work. I guess that is no surprise.

I think about what is happening and why.

Ah! I need to set that setting in the dashboard thing about using angular (what's its)

Done!

 ![Screenshot from 2020-09-03 08-42-57](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/7/179e480530199a8af914425e18d63424815da41e.png)

Still doesn't work.

Hmmmm....

I dig around more.

I then remembered I needed a `CSS` declaration node. (`template`?)

Found it on the original machine. Exported it. Imported it. Deployed.

Still doesn't work.

ARGH!

Oh! Yeah! The actual icon pack.

I went off and installed that. Missing the part at the top. (_It happens_)  
_Installed_ ok. The directory was there.

Still doesn't work.

**This is getting annoying** _(that is me talking to myself.)_

Then I was told I don't need to install the pack, as it is included in the newer Node-Red.  
Yeah, ok. My bad. But I had forgotten I had actually updated the machine.  
_It happens._

I removed all the installed icons in `.node-red/public/weathericons/*`

Found an _example_ flow. One icon, but..... _I have to play with the cards I am dealt._

```auto
[{"id":"f320e767.c0b5a","type":"ui_template","z":"dde40def.3063f","group":"e4220cf0.2a6188","name":"ui_template","order":2,"width":"5","height":"5","format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"wi-wu-hazy wi-4x\" style=\"color:gold;\"></i>\n</div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":400,"y":220,"wires":[[]]},{"id":"bac691f5.da7428","type":"inject","z":"dde40def.3063f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":190,"y":270,"wires":[["f320e767.c0b5a","15d5738e.daeae4"]]},{"id":"15d5738e.daeae4","type":"ui_template","z":"dde40def.3063f","group":"e4220cf0.2a6188","name":"ui_template Original","order":2,"width":"5","height":"5","format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"wi wi-darksky-thunderstorm wi-4x\" style=\"color:red;\"></i>\n</div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":430,"y":310,"wires":[[]]},{"id":"e4220cf0.2a6188","type":"ui_group","z":"","name":"weather-icons-lite","tab":"5084cb8e.261154","order":1,"disp":true,"width":"27","collapse":false},{"id":"5084cb8e.261154","type":"ui_tab","z":"","name":"Example","icon":"dashboard","order":7,"disabled":false,"hidden":false}]

```

I removed the `rotate270` as it didn't really serve any benefit at this point.

That works. Good. I have a base line.  
_(note the two lines of text bottom right)_

So I duplicate the node and see this:

 ![Screenshot from 2020-09-03 08-31-25](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/e/5e0f9b79a4c7a851f7cb7b424333d4a7cffba71d.png)

 ![Screenshot from 2020-09-03 08-31-21](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/8/78b1110be5e1fb25f46235ae97f19afb327d8145.png)

So I see the code can work.

Ok, so.....

I then find a `css_mapping` link. This shows me all the icons and their names! Hurray!

Names!

 ![Screenshot from 2020-09-03 08-32-11](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b5410f249643ed1a0294454f6325255a9643a03e.png)

 ![Screenshot from 2020-09-03 08-31-56](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/0/e063c875a21ffaad8ef1a33bfef0ee699aa5a66e.png)

(Can you see where this is going?)

So I put that in. `DEPOLY` and `inject` to set the icon.

 ![Screenshot from 2020-09-03 08-32-03](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/9/99bacc3db1955eff742c3a4ece53ef748e7b8734.png)

Yeah. Right.

So although I am wanting to use `sunrise` and `sunset` which don't seem to be in this pack, so that is a whole other problem.  
But given I am using an icon who's name is shown in the pack, it is really impossible for me to work on anything as there is no base line any more.

The **one** icon shown in the example works. But beyond that?

Although were was another flow, it required weather-underground (or what ever).  
That is not really a usable example as I don't have an account with them and I think it is a bit _presumptuous_ to make someone have to install other nodes to get an example working.  
Why can't a flow be made which just creates all the icons locally?

Looking for more help I saw someone else asked for help in May.

```auto
Can you please add some instructions on how to install this ?
Readme says that it is already included in node-red.
However, when I imported this flow
https://gist.github.com/djiwondee/b5b7d5da14d24e71de447e6aa290937e
it doesn't pull in CSS and icons. I see in browser console that css is throwing 404.

```

Reply:

```auto
As you are already aware, this is integrated within the node-RED dashboard.
If it's not working for you within the node-RED environment, then please post in the node-RED forum when you can get support.

```

So I am asking here.

Someone.

Then I have to work out how to get the `sunrise` and `sunset` icons working.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [3 September 2020 06:43 UTC](https://discourse.nodered.org/t/stuck-getting-weather-icons-lite-working/32370/2 "2020-09-03T06:43:30Z")

</div>

Check the purple border

 ![Screenshot 2020-09-03 at 08.40.04](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/0/00bf29a4fd87da8566322ae885dc198c011d117a.jpeg)

What is missing in your code ?

To elaborate: the icon set has been created under a class of `wi`, under this class there are icons that have naming conventions `wi-xxx-xxx`

This applies to many icons sets, like font-awesome: `fa fa-xxx`, same for the weather icons `wi wi-xxxx`

---

<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:** [3 September 2020 06:47 UTC](https://discourse.nodered.org/t/stuck-getting-weather-icons-lite-working/32370/3 "2020-09-03T06:47:54Z")

</div>

Thanks. Do you think it is the same for the `sunrise` and `sunset` icons?

They aren't listed in the set and alas are the ones I want (need) to use.

There are a couple which _could_ be used, but they aren't quite the right ones.

---

<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:** [3 September 2020 07:16 UTC](https://discourse.nodered.org/t/stuck-getting-weather-icons-lite-working/32370/4 "2020-09-03T07:16:21Z")

</div>

If they aren't here, then they aren't there. You have to use substitutes, and call them correctly.

---

<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:** [3 September 2020 07:18 UTC](https://discourse.nodered.org/t/stuck-getting-weather-icons-lite-working/32370/5 "2020-09-03T07:18:19Z")

</div>

Thanks.

So (sorry, I have to ask) There is now no way of installing the larger set any more?

---

<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:** [3 September 2020 07:25 UTC](https://discourse.nodered.org/t/stuck-getting-weather-icons-lite-working/32370/6 "2020-09-03T07:25:12Z")

</div>

Nothing has changed. The weather-icons-lite font is still built in and I thought that is what you were asking about.

---

<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:** [3 September 2020 07:33 UTC](https://discourse.nodered.org/t/stuck-getting-weather-icons-lite-working/32370/7 "2020-09-03T07:33:52Z")

</div>

Well, I confused.

When I search about how to install `weather icons` and I get to the page, there is this big thing saying DO NOT INSTALL THIS AS IT IS PART OF NODE RED.

- See end:

I have already been down that rabbit hole and to the best of my knowledge: it didn't work when I imported a working flow from another machine.

Then I went through the story of remembering how to set the dashboard `ui-type` stuff to use angular.

Then I remembered I also had to import a `template` node to define use of `weather icons`.

Still didn't work.

Then I was told/shown that I don't need to and so went through the pain or removing it.

So really I don't know where I am or what to do.

I want the `sunrise` and `sunset` icons usable. They aren't in the `lite` pack.  
I didn't even know of it and had installed the full pack.

I'll try again. I'm sure the computer is going to make a liar of me - as normal.

From the site searching "How to install weather icons" (no lite)

> DO NOT USE - SEE [WEATHER-ICONS-LITE](https://github.com/Paul-Reed/weather-icons-lite) WHICH IS MERGED INTO NODE-RED CORE

Idiots like me get confused when things like this are shown.

---

<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:** [3 October 2020 07:34 UTC](https://discourse.nodered.org/t/stuck-getting-weather-icons-lite-working/32370/8 "2020-10-03T07:34:15Z")

</div>

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