search

balassy / MMM-RemoteTemperature

MagicMirror module that displays temperature from a remote sensor.
MIT License
15 stars 6 forks source link

Font Awesome v5 icons not displaying #1

Closed cweinhofer closed 5 years ago

cweinhofer commented 6 years ago

having trouble with certain icons not displaying

icons like "bed" (https://fontawesome.com/icons/bed) and "tree" (https://fontawesome.com/icons/tree) work fine

but icons like "couch" (https://fontawesome.com/icons/couch) and "utensils" (https://fontawesome.com/icons/utensils) just show blank

cweinhofer commented 6 years ago

I did some digging and I think I've isolated the issue - MM is using an old version of FA. I was able to get the icons to show by following the suggestion here: https://github.com/MichMich/MagicMirror/issues/1344#issuecomment-402756753

1) changed node_modules/font-awesome to font-awesome_4 2) downloaded a copy of the FAv5 files (https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself) to node_modules/font-awesome_5/ 3) changed the vendor.js and MMM-RemoteTemperature.js files as indicated

I can now call up all the icons by referring to them in FAv5 format in the config file.

I know this is just a workaround (undone with any future upgrades) but I hope it helps.

balassy commented 6 years ago

Thanks for sharing the workaround @cweinhofer! It's sad to see that the related PR was closed due to inactivity :(

cweinhofer commented 6 years ago

I know very little about github and pull requests, but looking at https://github.com/MichMich/MagicMirror/pull/1345, it appears groszejc submitted the PR, but it wasn't formatted correctly (as he notes, it was his first time). MichMich closed it the same day, I'm assuming because he was expecting groszejc to resubmit it in the correct format (which it appears he did not).

I'd hate to see this die on the vine, especially because the solution seems to be already worked out. @balassy Do you know how to format the PR request properly so it can be merged in the way MichMich requests?

I know very little programming (just enough to follow instructions and hack together pieces of code), but I'm happy to help anyway I can.

balassy commented 6 years ago

I submitted the question on the forum to the author of MagicMirror: https://forum.magicmirror.builders/topic/8776/update-font-awesome-to-version-5

cweinhofer commented 5 years ago

Any idea where things stand on this? I just upgraded to MM 2.6.0 and according to the comments in https://github.com/MichMich/MagicMirror/tree/master/vendor it would appear that support for the FA5 icons has been added. However, I still can't get them to show up.

If it helps, the icon I'm trying to add is "utensils" (for the sensor in my kitchen). For the icon string, I've tried "utensils", "fa-utensils" (as listed in the CSS file), and "fas fa-utensils" (as per the old work-around). Nothing on any of them.

I also tried the CSS workaround suggested in https://forum.magicmirror.builders/topic/8776/update-font-awesome-to-version-5/2 (as a simpler alternative to the workaround above), the that doesn't seem to work either.

cweinhofer commented 5 years ago

I think I figured it out. The MMM-RemoteTemperature.js needed 'font-awesome5.css' in the getStyles section to take advantage of the new node module. Once that's in there you can just use the plain name of the FA icon (e.g. "utensils").

I created a pull request, but it's my first one -- so feel free to close it and make the change yourself if there is anything wrong.

balassy commented 5 years ago

Thank you very much for your contribution, @cweinhofer, I'm happy to merge your PR (PR #2)!