Star glyph not rendering correctly #2097

@bkcsoft commented on GitHub (Jul 26, 2018):

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

@bkcsoft commented on GitHub (Jul 26, 2018): This is because you don't have a font installed with the necessary glyph in it.

GiteaMirror commented

@Wqrld commented on GitHub (Jul 26, 2018):

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.

@Wqrld commented on GitHub (Jul 26, 2018): 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.

GiteaMirror commented

@bkraul commented on GitHub (Jul 26, 2018):

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.

@bkraul commented on GitHub (Jul 26, 2018): 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.

GiteaMirror commented

@Wqrld commented on GitHub (Jul 26, 2018):

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

@Wqrld commented on GitHub (Jul 26, 2018): I am confused because it literally differs per webpage within the same browser, fontawesome seems to be the exact same across the two webpages.

GiteaMirror commented

@bkraul commented on GitHub (Jul 26, 2018):

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

@bkraul commented on GitHub (Jul 26, 2018): Like I mentioned earlier, it looks to me like an encoding issue of sorts.

GiteaMirror commented

@sapk commented on GitHub (Jul 26, 2018):

@Wqrld could you provide different page where it differ ?

@sapk commented on GitHub (Jul 26, 2018): @Wqrld could you provide different page where it differ ?

GiteaMirror commented

@sapk commented on GitHub (Jul 26, 2018):

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

@sapk commented on GitHub (Jul 26, 2018): If you refer to the repo listing it use the `octicon octicon-star `and not `icon fa-star-o`

GiteaMirror commented

@sapk commented on GitHub (Jul 26, 2018):

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

@sapk commented on GitHub (Jul 26, 2018): 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

GiteaMirror commented

@Wqrld commented on GitHub (Jul 26, 2018):

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

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

GiteaMirror commented

@bkraul commented on GitHub (Jul 26, 2018):

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.

@bkraul commented on GitHub (Jul 26, 2018): 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.

GiteaMirror commented

@Wqrld commented on GitHub (Jul 26, 2018):

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

@Wqrld commented on GitHub (Jul 26, 2018): It was grabbed from docker a couple days ago, that's weird. but okay.

GiteaMirror commented

@sapk commented on GitHub (Jul 27, 2018):

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

@sapk commented on GitHub (Jul 27, 2018): @bkraul at least we know now that it worked at d94472e. We will have to dissect what happen in between.

GiteaMirror commented

@exside commented on GitHub (Jul 28, 2018):

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;
}

@exside commented on GitHub (Jul 28, 2018): Same issue here (Docker setup, latest as of now), also had a look at the CSS and same experience here, other "content" values work... ![2018-07-28 at 08 29 58](https://user-images.githubusercontent.com/445501/43353800-d9ee4f62-9240-11e8-8eac-78212094711c.png) 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 ![2018-07-28 at 08 45 18](https://user-images.githubusercontent.com/445501/43353944-998c9b7a-9242-11e8-838f-789ba69253ef.png) 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... ![2018-07-28 at 08 46 20](https://user-images.githubusercontent.com/445501/43353949-c092f250-9242-11e8-980d-f3e5541b143a.png) 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): ```css .icon { font-family: "FontAwesome" !important; } ```

GiteaMirror commented

@Wqrld commented on GitHub (Jul 28, 2018):

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

EDIT: can i get a approval for that fix?

@Wqrld commented on GitHub (Jul 28, 2018): Sorry for all the fixed, i was kinda getting irritated, last one should be good. EDIT: can i get a approval for that fix?

GiteaMirror commented

@bkraul commented on GitHub (Jul 28, 2018):

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 commented on GitHub (Jul 28, 2018): 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: ```css 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.

GiteaMirror commented