missing font awesome css
Closed this issue · 9 comments
The jsx file makes references to but there is no fontawesome.min.css included in the download. Is that missing or shall I get it from somewhere? I tried getting https://get.cdnpkg.com/font-awesome/4.7.0/font-awesome.min.css but there is not icon for some of the header entries such as fa-angles-right. Any suggetsions?
Hi Mike,
Thank you for reporting this issue. I added the file with the last commit. Please let me know if the issue persists. The reason why some icons were still missing with the file you downloaded is because I'm using version 6.1.1.
Best,
Roman
Roman,
That kinda helped but not completely. If I use the fontawesome.min.css you uploaded or change the reference to https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css I get small square boxes in place of the actual icons for some reason.
However, if I use https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css the icons show up just fine. Oddly enough though downloading all.min.css and putting it into the widget folder and referencing /calendar/all.min.css does not work and I get the square boxes again.
Any thoughts from here?
I'll also note the debug console shows this warning:
Warning: Invalid DOM property class. Did you mean className?
in i (created by Header)
in div (created by Header)
in Header
in div
But it does not seem to cause any ill effects.
That is very puzzling because I added the exact file that I'm using locally and all icons show correctly for me. I would first have to be able to reproduce the issue before fixing it. Did you try restarting Übersicht? I'm wondering whether it has to do with caching, although I don't have much hope that that's the problem.
And yes, class should be replaced with className (will push that soon).
Yes very odd indeed. Yes I have restarted Übersicht but not the entire machine which I may try. I thought it might be a caching issue so I deleted ~/Library/Caches/tracesof.Übersicht but that didn't help. I am thinking that for some reason it is just not able to parse or read the local file because if I enter a bad filename I don't even get the small little boxes at all so I know it is finding the file.
If I go into the debug console click on the elements it shows the correct path to the file and if I click the file then it pulls up in the contents of the file successfully. I'm not even sure further to look at.
I have an idea what may be going on now. I decided to test if fontawesome worked outside of your widget so I created a very small widget to display just a string like this:
<link rel="stylesheet" href="/fontawesome.min.css"></link>
<div id="header">
<i
title="Jump one day backward"
class="fa fa-angles-left"
/>
</div>
<div id="test">
testing
</div>
I found that this works for me ONLY if your widget (using the cdnjs URL) is enabled. As soon as I disable your widget then my test widget starts showing the small boxes instead of the left angles. And, looking at the debug console if I click on the entry at the top of the element list I see a couple of ":host , :root" entries that have css defined as "--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free", another for --fa-font-regular and a 3rd one for --fa-font-brands. As soon as I disable your widget those entries go away and the icons change to small boxes.
In fact in my small widget above if I remove the stylesheet link it still works properly as long as your widget is enabled.
So, is there any chance that you have another widget on your system that has loaded the font awesome stuff using the full URL which may be where your widget is picking the fonts up from?
After reading your comment I was almost sure you cracked the case. I have a few other widgets loaded but never checked whether they use fontawesome. However, the icons in the calendar widget still display fine even when I disable/remove all other widgets. I also double-checked that the icons are actually defined in fontawesome.min.css (all five of them are).
I'm really confused because it looks like everything that should be displayed is available. If you hadn't already ruled out caching, my guess would've been that a different version of the file is used instead.
Going through the code again I realized that forcing the user to put the widget in a directory called calendar probably isn't a good idea. I changed it so the content for the widget should be saved in a directory called yet-another-simple-calendar.widget. The link to the fontawesome.min.css file needed to be adjusted as well of course. Maybe you could try one more time with the updated .zip archive?
Still no luck for me but I am good using the URL myself.
I figured it out. When checking the difference between the fontawesome.min.css file (that gives you empty boxes instead of icons) and the all.min.css file (that works), I noticed that the latter also references a couple of fonts. Then I checked whether any Font Awesome font was installed on my system, and it was... Once I deactivated the font I could replicate the issue you had and confirm that it's only resolved with the all.min.css file. So your idea of another Übersicht widget providing additional information that isn't present in the fontawesome.min.css file was pretty close, it was just my system instead of a widget.
After all this, I will switch to the URL so users don't have to worry about directory names.
Thanks again for pointing this out and your patience in resolving it. I'm glad we found the solution.
Thanks for the update. I never thought about the fontawesome as a system font nor even sure I knew you could do that! But that does make sense. In my research I found it "may" be possible to use a userMain.css file in the base widgets directory to set global css styles but didn't investigate that option myself. I am happy with the loading the fonts from the URL myself.
I've actually learned some stuff myself during this process. I have a handful of pretty simple widgets I wrote that are all in coffeescript. I never thought I could figure out how to re-write them in jsx but after reading over your files I understand better what is going on so will give it a try and see what happens.