Gitea: Star glyph not rendering correctly

[bkraul]

• Gitea version (or commit ref): 32f2559
• Operating system: (whatever try.gitea.io runs on)
• Can you reproduce the bug at https://try.gitea.io:
  
  
  
  • [x] Yes https://try.gitea.io/Arrow/TestRepo/issues/1
  
  
  • [ ] No
  
  
  • [ ] Not relevant
  
  
• Log gist:

Description

The glyph icon for "Star" renders incorrectly on all browsers I tried. I am assuming it has something to do with unicode, as I have seen this issue before related to that. It is possible this affects other glyphs around the gui, but can't say for sure.

Screenshots

[bkcsoft]

This is because you don't have a font installed with the necessary glyph in it.

[Wqrld]

It does render right on my private gitea instance but it is broken on the try.gitea instance.

Edit: Fa version is the same, weird

@bkcsoft people shouldn't need to install a font to see that icon.

[bkraul]

I was under the impression that these were font awesome webfont glyphs (not requiring locally installed fonts). Which font would I be missing? Client OS is Windows 10 Build 1803.

[Wqrld]

I am confused because it literally differs per webpage within the same browser, fontawesome seems to be the exact same across the two webpages.

[bkraul]

Like I mentioned earlier, it looks to me like an encoding issue of sorts.

[sapk]

@Wqrld could you provide different page where it differ ?

[sapk]

If you refer to the repo listing it use the octicon octicon-starand not icon fa-star-o

[sapk]

I tested a little and only the star is not displayed. Every other content seems to work.

.fa-star-o:before {
    content: "\f006";
}

Strangely, the vendor folder doesn't seems to be touched since 11 month.
https://github.com/go-gitea/gitea/tree/master/public/vendor/assets/font-awesome

[Wqrld]

@sapk it works on my instance, https://git.feroxmc.ga/Wqrld/Bungee for example (not sure if you can see it)

[bkraul]

Your commit seems pretty old (d94472e is from May 21st). try.gitea.io is at commit be4ec0c (3 hours ago). Mine is at a847d16 (4 hours ago). If you are brave, I'd suggest upgrading. Then again, the only thing that would prove is some sort of regression in between.

[Wqrld]

It was grabbed from docker a couple days ago, that's weird. but okay.

[sapk]

@bkraul at least we know now that it worked at d94472e. We will have to dissect what happen in between.

[exside]

Same issue here (Docker setup, latest as of now), also had a look at the CSS and same experience here, other "content" values work...

even when clicked (e.g. starred), the icon works as it changes the CSS class to .fa-star instead of .fa-star-o...so it seems to be a specific issue with that icon.

anybody knows how the iconfont was built? It doesn't seem to be a "stock" FontAwesome integration (or maybe they just renamed it to "Icons"?) yeah, looks like standard FontAwesome, except that it was renamed to "Icons" within the CSS

That actually wasn't the case, if you look at /vendor/assets/font-awesome/css/font-awesome.min.css so the question is why does it say "Icons" for the font-family there...because if you change it, everything works as expected...

it seems the font-family: Icons is coming from semantic UI, the question is, should that be the case, seems to be some kind of conflict here or are the Semantic UI icons supposed to be identical with FontAwesome? Basically a simple and ugly !important override would fix it, I'm new to gitea, so if somebody can point me to the right file for custom CSS I'd do a PR with that (if even an acceptable solution):

.icon {
    font-family: "FontAwesome" !important;
}

[Wqrld]

Sorry for all the fixed, i was kinda getting irritated, last one should be good.

EDIT: can i get a approval for that fix?

[bkraul]

I tried your approach but it seems it breaks the fonts on the startup page (what says "Gitea, git with a cup of tea"). I applied as:

i.icon.fa-star-o.icon {
  font-family: "FontAwesome" !important;
}

And that worked to solve the specific problem. An ugly fix, until it is addressed in master.

[bkraul]

Something else weird that happens by using that override is that the system lags quite a bit while waiting for googlefonts api. I wonder why. Font-awesome is bundled with the gitea install. Maybe the font name for the local webfont import is different?

[exside]

@bkraul yeah, can imagine that stuff breaks with an !important...not the way to go anyways, but have to dig deeper into the codebase before I can be of any real use =)...just discovered gitea^^...

[lafriks]

That's why I don't like semantic UI as it uses ! important in quite some places..

[atom0s]

Other work around is just renaming the icon from fa-star-o to fa-star and it works fine.

[bkraul]

This fixed for me without further problems. I am using it in my CSS override I wrote, so I am not touching gitea source:

i.icon {
  font-family: FontAwesome;
}

As @lafriks and @exside there seem to be problems with the !important overrides. I am fortunate that this approach works without it:

I suppose I will leave this open until it is properly resolved.