Weather icons don't work on one machine

[Trying_to_learn]

I have a bigger NUC with power and installed weather icons.

They work on there.

I got a bit of a flow working.

I then went to my favourite RPI and it is installed on that machine too.l

But when I import the flow it doesn't work.

Here is what I see from the CLI on the RPI:

pi@TimePi:~/.node-red $ cat settings.js | grep httpStatic
    //httpStatic: '/home/nol/node-red-static/',
    httpStatic: '/home/pi/.node-red/public',
    //httpStatic: '/home/pi',
    // the static content (httpStatic), the following properties can be used.
    //httpStaticAuth: {user:"user",pass:"$2a$08$zZWtXTja0fB1pzD4sHCMyOCMYz2Z6dNbM6tl8sJogENOMcxWV9DN."},
pi@TimePi:~/.node-red $ cd public
pi@TimePi:~/.node-red/public $ lf weather-icons/
example/  mycss/  myfonts/  README.md
pi@TimePi:~/.node-red/public $ lr weather-icons/
  ----====  Recursive list starts here  ====----
weather-icons/:
example  mycss  myfonts  README.md

weather-icons/example:
example.txt

weather-icons/mycss:
weather-icons.css  weather-icons.min.css  weather-icons-wind.css  weather-icons-wind.min.css

weather-icons/myfonts:
weathericons-regular-webfont.eot  weathericons-regular-webfont.ttf   weathericons-regular-webfont.woff2
weathericons-regular-webfont.svg  weathericons-regular-webfont.woff
pi@TimePi:~/.node-red/public $ 

Where's the elephant I'm missing?

[bakman2]

What does the browser say?

[Trying_to_learn]

It just shows a blank part on the dashboard.

Here are the examples/comparisons/pictures:

The code:

[{"id":"89d1ad78.c33be8","type":"inject","z":"15af81c5.64999e","name":"","topic":"","payload":"wi-sunrise","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":910,"y":220,"wires":[["a18e1e15.1d393"]]},{"id":"8ef29954.17eb08","type":"inject","z":"15af81c5.64999e","name":"","topic":"","payload":"6:49","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":930,"y":280,"wires":[["8654d4b5.9de82"]]},{"id":"12f17ddc.cfa52a","type":"ui_text","z":"15af81c5.64999e","group":"141c52cf.f6b8e5","order":1,"width":"2","height":"1","name":"","label":"","format":"{{msg.payload}}","layout":"row-spread","x":1160,"y":220,"wires":[]},{"id":"a18e1e15.1d393","type":"function","z":"15af81c5.64999e","name":"","func":"    msg  = {payload: '<font color = \"yellow\" i class=\"wi wi-sunrise fa-2x\"></i>'};\nreturn msg;","outputs":1,"noerr":0,"x":1040,"y":220,"wires":[["12f17ddc.cfa52a","4e71b7de.234318"]]},{"id":"8654d4b5.9de82","type":"ui_template","z":"15af81c5.64999e","group":"141c52cf.f6b8e5","name":"","order":2,"width":"1","height":"1","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":1130,"y":280,"wires":[[]]},{"id":"4e71b7de.234318","type":"debug","z":"15af81c5.64999e","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":1180,"y":180,"wires":[]},{"id":"141c52cf.f6b8e5","type":"ui_group","z":"","name":"New Sunrise test","tab":"ce4bcacd.5cc46","order":5,"disp":true,"width":"3","collapse":false},{"id":"ce4bcacd.5cc46","type":"ui_tab","z":"","name":"VTEMP","icon":"dashboard","order":36,"disabled":false,"hidden":false}]

[bakman2]

Right-click -> inspect element. Look at the resources tab while you reload.

[Trying_to_learn]

Ok, thanks.

This is what I see - both shown.

You can see I am injecting the correct stuff - as one of them works.
But when you see the second one, there is no sign of the weather icon name.

[bakman2]

I am not familiar with FF, but you should be able to see if it is able to load the required files or not. The source won't change. Network tab> reload.

[Trying_to_learn]

Actually I found it.

See new piccie.

But why isn't it being shown as it is on the other machine?

Just tried Chrome and it is the same for what it show. (or doesn't)

[bakman2]

What did you find ? Exactly nothing.

The icons are loaded via a file, if the file is not loaded, you won't see the icons.
So you need to determine if the file is being loaded or not. Network tab > reload.

[Trying_to_learn]

@bakman2

What did you find ? Exactly nothing.

The icons are loaded via a file, if the file is not loaded, you won't see the icons.
So you need to determine if the file is being loaded or not. Network tab > reload.

Sorry?

In the first shot, I didn't see the wi wi-sunrise bit.

I have since found it listed/shown in the window.

Can you explain what you mean:

@bakman2

Network tab > reload.

I press the RELOAD tab and it doesn't make the icon/image load.

Chrome does the same: icon/image not shown on that machine.

[bakman2]

Try it in Chrome (better debugging), this is an example:

Look at the sources tab, reload your page, you will see if files get loaded or not (shown in red).

[Trying_to_learn]

Well, I think this is something to do with it...... One machine it is given a size of 48 x 40 pixels.
On the other it is 0 x 0.

[Trying_to_learn]

Ok, bit more digging.

This could also be problematic, but there are no "red" lists. But I am sure you can see the differences.

[Trying_to_learn]

I think this may be it.....

On the good machine I am seeing this:

On the other machine as best I can get it as the same I see this:

May I have to un-install and re-install the set?

[bakman2]

You select 2 different files. A woff file (web open font format) is a binary that is why you see these characters.

Then again, I see 2 different dashboards on 2 different machines, comparing apples with oranges.

[Trying_to_learn]

Yeah, sorry about comparing "apples and oranges".......

I only know what I know.

I am looking at differences to try and work out what is different and (maybe) causing the problem.

That there isn't a weather-icon-mail.css on both machines and the one on which it is works.....

[bakman2]

then you found the problem.

[Trying_to_learn]

I don't know.

I am only guessing.

I have posted/shown pictures where the area where the the size on the screen is 0 x 0.
It won't work/be shown if it is not a real size.

See the red bit with the ::before == $0

Not really understood by me, but I see that it is in a different place.

Not easy to prove as I can't edit the code, or that part of it anyway.

Further looking I can see differences in the code:

[bakman2]

The source code is not really relevant, what is relevant, is which files are loaded or not. You have errors in the screenshots, did you look at that ?

[Trying_to_learn]

Yes, and from what I can determine they are nothing to do with what I am doing.

I would copy/paste the text, but I can't seem to copy text from the screen/s.

On the machine which isn't working the errors are:

[Deprecation] Application Cache is restricted to secure contexts. Please consider migrating your application to HTTPS, and eventually shifting over to Service Workers. See https://goo.gl/rStTGz for more details.
app.min.js:148 You are using the ngTouch module. 
AngularJS Material already has mobile click, tap, and swipe support... 
ngTouch is not supported with AngularJS Material!

From the working machine:

[Deprecation] Application Cache is restricted to secure contexts. Please consider migrating your application to HTTPS, and eventually shifting over to Service Workers. See https://goo.gl/rStTGz for more details.
app.min.js:514 Rendered http://192.168.0.6:1880/ui/css/app.min.less successfully.
app.min.js:514 CSS for http://192.168.0.6:1880/ui/css/app.min.less generated in 115ms
app.min.js:514 Less has finished. CSS generated in 115ms
app.min.js:148 You are using the ngTouch module. 
AngularJS Material already has mobile click, tap, and swipe support... 
ngTouch is not supported with AngularJS Material!
(anonymous) @ app.min.js:148
2app.min.js:148 SideNav 'left' is not available! Did you use md-component-id='left'?
(anonymous) @ app.min.js:148
app.min.js:514 Rendered http://192.168.0.6:1880/ui/css/app.min.less successfully.
app.min.js:514 CSS for http://192.168.0.6:1880/ui/css/app.min.less generated in 83ms
app.min.js:514 Less has finished. CSS generated in 83ms
app.min.js:520 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: 
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: , _f: false, _strict: undefined, _locale: [object Object]
Error
    at Function.createFromInputFallback (http://192.168.0.6:1880/ui/js/app.min.js:520:3368)
    at va (http://192.168.0.6:1880/ui/js/app.min.js:520:21539)
    at Sa (http://192.168.0.6:1880/ui/js/app.min.js:520:22250)
    at Ha (http://192.168.0.6:1880/ui/js/app.min.js:520:22332)
    at l (http://192.168.0.6:1880/ui/js/app.min.js:520:209)
    at a.parseTime (http://192.168.0.6:1880/ui/js/app.min.js:534:15693)
    at a.<anonymous> (http://192.168.0.6:1880/ui/js/app.min.js:534:9480)
    at Object.o.each (http://192.168.0.6:1880/ui/js/app.min.js:532:6904)
    at a.determineDataLimits (http://192.168.0.6:1880/ui/js/app.min.js:534:9435)
    at a.update (http://192.168.0.6:1880/ui/js/app.min.js:532:31028)

[Trying_to_learn]

Well, a bit of progress has been made.

This flow works.

[{"id":"fea1dbc8.8b4ad8","type":"function","z":"cc5873bb.2070e","name":"","func":"msg  = {payload: '<font color = \"yellow\" i class=\"wi wi-sunrise fa-2x\"></i>'};\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":640,"wires":[["a8c18cd3.7209a8"]]},{"id":"98e47d10.0fb678","type":"inject","z":"cc5873bb.2070e","name":"Sunrise","topic":"","payload":"sunrise","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":390,"y":640,"wires":[["fea1dbc8.8b4ad8"]]},{"id":"a8c18cd3.7209a8","type":"ui_text","z":"cc5873bb.2070e","group":"3bc589f2.8828ce","order":3,"width":"2","height":"1","name":"","label":"","format":"{{msg.payload}}","layout":"row-spread","x":660,"y":640,"wires":[]},{"id":"e70d7395.25d7c","type":"inject","z":"cc5873bb.2070e","name":"Night fog","topic":"","payload":"night-fog","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":380,"y":680,"wires":[["17b11034.bf65a8"]]},{"id":"c87f4586.abf148","type":"inject","z":"cc5873bb.2070e","name":"Day sunny","topic":"","payload":"day-sunny","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":380,"y":720,"wires":[["27335178.4cafe6"]]},{"id":"8e3c20f1.67632","type":"inject","z":"cc5873bb.2070e","name":"Day fog","topic":"","payload":"day-fog","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":390,"y":760,"wires":[["49728963.cc3778"]]},{"id":"20b63b62.46160c","type":"inject","z":"cc5873bb.2070e","name":"Day rainy","topic":"","payload":"day-rainy","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":"","x":380,"y":800,"wires":[["f66462ea.3c62a8"]]},{"id":"17b11034.bf65a8","type":"function","z":"cc5873bb.2070e","name":"","func":"msg  = {payload: '<font color = \"yellow\" i class=\"wi wi-night-fog fa-2x\"></i>'};\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":680,"wires":[["a8c18cd3.7209a8"]]},{"id":"27335178.4cafe6","type":"function","z":"cc5873bb.2070e","name":"","func":"msg  = {payload: '<font color = \"yellow\" i class=\"wi wi-day-sunny fa-2x\"></i>'};\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":720,"wires":[["a8c18cd3.7209a8"]]},{"id":"49728963.cc3778","type":"function","z":"cc5873bb.2070e","name":"","func":"msg  = {payload: '<font color = \"yellow\" i class=\"wi wi-day-fog fa-2x\"></i>'};\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":760,"wires":[["a8c18cd3.7209a8"]]},{"id":"f66462ea.3c62a8","type":"function","z":"cc5873bb.2070e","name":"","func":"msg  = {payload: '<font color = \"yellow\" i class=\"wi wi-day-rainy fa-2x\"></i>'};\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":800,"wires":[["a8c18cd3.7209a8"]]},{"id":"81def411.cf43","type":"ui_template","z":"cc5873bb.2070e","group":"3bc589f2.8828ce","name":"Load CSS","order":0,"width":"0","height":"0","format":"<link rel=\"stylesheet\" href=\"/weather-icons/mycss/weather-icons.min.css\">\n<style>\n .nr-dashboard-theme-dark ui-card-panel {\n \tbackground-color: #222;\n \toutline: 1px solid #cccccc;\n \t }\n</style>\n","storeOutMessages":false,"fwdInMessages":false,"templateScope":"local","x":468,"y":343,"wires":[[]]},{"id":"3bc589f2.8828ce","type":"ui_group","z":"","name":"Test","tab":"77086a97.0ed444","disp":true,"width":"6"},{"id":"77086a97.0ed444","type":"ui_tab","z":"","name":"Test","icon":"dashboard"}]

I press the buttons and the icon changes.

I cut and move part of the flow to the flow I want it on, and this is what I have:

[{"id":"e08af36a.5c84c8","type":"inject","z":"c636aa5a.cc34","name":"","topic":"","payload":"wi-sunrise","payloadType":"str","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":1540,"y":550,"wires":[["b1a29603.52fb5","a8dc54d3.6f7798"]]},{"id":"b1a29603.52fb5","type":"function","z":"c636aa5a.cc34","name":"","func":"msg  = {payload: '<font color = \"yellow\" i class=\"wi wi-sunrise fa-2x\"></i>'};\nreturn msg;","outputs":1,"noerr":0,"x":1670,"y":550,"wires":[["1d62649.1375c1b"]]},{"id":"1d62649.1375c1b","type":"ui_text","z":"c636aa5a.cc34","group":"ccfdf225.95c52","order":2,"width":"2","height":"1","name":"Sunrise icon","label":"","format":"{{msg.payload}}","layout":"row-spread","x":1820,"y":550,"wires":[]},{"id":"ccfdf225.95c52","type":"ui_group","z":"","name":"Daytime mode","tab":"1c792414.600e94","order":1,"disp":false,"width":"3","collapse":false},{"id":"1c792414.600e94","type":"ui_tab","z":"","name":"Telemetry","icon":"dashboard","order":2}]

I deploy the flow and press the inject button.

Go to the web page. No icon.

Here is a comparison (all on the same machine)