Icons for the "Cost Control" in user dropdown and dashboard header are not visible

[imfx77]

I normally work with a custom semi-transparent dark theme for Kanboard, and it was the default culprit for the issue. But I took my time to confirm that this behavior reproduces for me with the default Kanboard theme, and also with some light or dark themes from Customizer plugin.

Please, refer the attached picture for further details.

What I noticed for items (1) and (2) is that you add a class cost-control-dropdown to the <li> tag, while other items in the dropdown and the header don't. Without that class the icons appear just fine, so I guess it overrides something that makes the icons disappear. I suggest you simply don't apply that class to your items in the dropdown and the header.

As for the item (3) - I know it is related to the Plugin Manager - but I considered reporting all the similar issues in one place. Unfortunately, I have no idea what's wrong with that one. I experimented a bit, and discovered that the cubes icon is not shown on any Kanboard page. I checked my distribution of Kanboard (latest v.1.2.35) for the vendor.min.css and it DOES define the cubes symbol and implies v.4.7.0 of Font Awesome in which it should be present. Yet, the symbol doesn't show.

So maybe the supplied font files with Kanboard are older. Those are binaries in app/assets/fonts and I don't know how to verify their actual version. I can only see in the Kanboard commit history that they were last updated on 06-Nov-2016. And the commit message doesn't mention any version, why should it? :laughing:

Let me know if the issues reproduce at you side. Or if you need additional info.

Regards

[aljawaid]

Hi thanks for that. First question is do you have svg support enabled on your server?

As all my plugins use svg images. If any of my plugins don't show the icons, this is the first place to check.

I will look at it again from my side though.

[imfx77]

First question is do you have svg support enabled on your server?

I don't really understand what you mean ... But for that matters, the icon of your Configuration plugin (which is just under the Cost Control in the dropdown on the above picture) is an SVG image, and it shows just fine.

As all my plugins use svg images.

Well, your code for the icons mentioned of the Cost Control and Plugin Manager definitely uses glyphs from Font Awesome through vendor.min.css. Like here: https://github.com/aljawaid/CostControl/blob/c700a2d7a78f8f29375d29a96d2e838766860287/Template/header/user_dropdown.php#L2

[aljawaid]

OK good point. I didn't realise about the configuration menu item.

I will look into it.

About the fontawesome, I only used the same class as a hack to override the menu item.

The class is not being picked up by kanboard as you described.

I will look for another way.

[imfx77]

Well, I guess I didn't fully understand all the mechanics you use to override the icons. In the case I cited you indeed use the url->icon() method that prints a fa-question-circle glyph but this doesn't really matter nor matters the class="cost-control-dropdown" on the <li> item. Because what you actually do underneath is explicitly override the bottommost element i.e. the li.cost-control-dropdown i.fa-question-circle::before, which is kinda sneaky and I didn't expect it, but nevertheless it is valid and it should work.

What I see now, is that the li.cost-control-dropdown i.fa-question-circle::before provides a content: url("data:image/svg+xml,%3Csvg ......... ); data, and for some reason it does not show. If I copy the url string and paste in a new browser window I actually see this icon:

But within the context of the Kanboard site I can't seem to find what is wrong. I tried a similar test with data:image/png and again it works in a separate window and not within the Kanboard site. The same issue manifests in the same way for all the icons of the PluginManager, so it is some generic problem with the url("data:image/* ...); usage.

Now, it doesn't appear to be related to the browser as it actually shows the standalone images. I rather guess it has smth to do with the way it is used inside Kanboard ... Or maybe indeed there is some issue with my specific self-hosted Kanboard instance due to some configuration and/or restrictions.

So, would you be so kind to explain to me what did you mean exactly by:

do you have svg support enabled on your server?

Where and how is this supposed to be setup? Can you direct me to some online site which uses pictures in such a CSS override manner? So I can check if the issue appears there.

Thanks