search

ForkAwesome / Fork-Awesome

DEPRECATED. A fork of the iconic font and CSS toolkit
https://forkaweso.me
1.33k stars 141 forks source link

Icons from 1.1.6 not showing up #165

Closed Berkmann18 closed 5 years ago

Berkmann18 commented 5 years ago

In the v1.1.6 release, icons like fa-bootstrap, fa-hashnode, fa-c, fa-gimp, fa-inkscape and even fa-php (although this one is available on FA) aren't displayed when I'm viewing an HTML page.

I'm using the stylesheet from https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.1.6/css/fork-awesome.min.css,

xuv commented 5 years ago

Have you refreshed your browser cache? It works with me. Here is a test page: https://codesandbox.io/s/5m2lk42434

Berkmann18 commented 5 years ago

Yup, still not showing up. Here's the repo for reference.

xuv commented 5 years ago

Yup, still not showing up.

What do you mean? You can't see the icons in the Code Sandbox linked in my previous post? Which browser are you using on which system? Can you see the icons being displayed on our official website? https://forkaweso.me

And btw, the repo you reference to does not use Fork Awesome, but uses Font Awesome 5.2.0 https://github.com/Berkmann18/Berkmann18.github.io/blob/023a48973ceb8e1ceed6316bb4ff7139246b3236/about.html#L8

tessus commented 5 years ago

@xuv he was referencing the dev branch ;-)

@Berkmann18 it looks like you are using both fonts: https://github.com/Berkmann18/Berkmann18.github.io/blob/dev/dist/about.html#L8

Please remove line 8 and try again.

I think I know what you are trying to do, but it won't work. The 2 fonts use the same namespace and after the fork the unicode character points started to diverge. You cannot use both fonts at the same time. e.g. using an icon from one when it's not available in the other.

Berkmann18 commented 5 years ago

What do you mean? You can't see the icons in the Code Sandbox linked in my previous post?

No, I can see them there but not on my web pages.

Which browser are you using on which system?

Chrome on Win10

Can you see the icons being displayed on our official website?

Yup.

@xuv he was referencing the dev branch ;-)

Indeed.

Please remove line 8 and try again.

I think I know what you are trying to do, but it won't work. The 2 fonts use the same namespace and after the fork the unicode character points started to diverge. You cannot use both fonts at the same time. e.g. using an icon from one when it's not available in the other.

Yes, I'm using both and MFizz as well as ForkAwesome and MFizz has icons that aren't in FA (including some that aren't in ForkAwesome) but I'm trying to eliminate two out three when possible.

But I'll try that and see what happens.

tessus commented 5 years ago

Hmm, I reckon that MFizz either uses a different namespace and/or uses different codepoints.

Maybe @xuv has an idea, if there's any chance we could make this work. Maybe we could create a new startpoint for ForkAwesome icons at current level +10,000 or something. On the other hand this would break the current implementation, when people are using the current codepoints. So I'm afraid we are back at square one.

Berkmann18 commented 5 years ago

So, by commenting out <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> on both index.html and about.html . I renamed all the fas and fab classes to fa (since that's the only namespace class used) but I see even less icons then when both FAs were used. That behaviour happens on both files where the icons are simply not visible (even when I disable my CSS file).

Hmm, I reckon that MFizz either uses a different namespace and/or uses different codepoints.

Yup, MFizz uses icon-[name] and no namespace like fa (e.g: icon-webpack) and those icons are displaying correctly.

xuv commented 5 years ago

The integrity check property is wrong. Full link should be: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.1.6/css/fork-awesome.css" integrity="sha256-kdV2mkChqt3z0hO8yZH5Aj+rDViItN8n9iu91TAPjlA=" crossorigin="anonymous" />

tessus commented 5 years ago

@xuv actually it should be:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.6/css/fork-awesome.min.css" integrity="sha256-nJE8Vg3b3QQ9hPPpmtsRHKm/nauV4PZiBw5mpSgOvQQ=" crossorigin="anonymous">

or

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.1.6/css/fork-awesome.min.css" integrity="sha256-kdV2mkChqt3z0hO8yZH5Aj+rDViItN8n9iu91TAPjlA=" crossorigin="anonymous" />

(you want to use the minimized version)

xuv commented 5 years ago

Also, you can't use Font Awesome and Fork Awesome at the same time. You will need to rebuild Fork Awesome and change the CSS prefix to whatever you feel like, but not fas, fab or icon... https://github.com/ForkAwesome/Fork-Awesome/blob/c14e361ccb9d5a266e523e04d8626cf828343d59/_config.yml#L27

Berkmann18 commented 5 years ago

(you want to use the minimized version)

Good catch, I tried to use your Cloundflare URL but it got blocked so this is the correct one: <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fork-awesome/1.1.6/css/fork-awesome.min.css" integrity="sha256-nJE8Vg3b3QQ9hPPpmtsRHKm/nauV4PZiBw5mpSgOvQQ=" crossorigin="anonymous" /> (note: the nJE8Vg3b3QQ9hPPpmtsRHKm/nauV4PZiBw5mpSgOvQQ= part which is, according to Chrome, the correct hash).

FYI:

@xuv

Also, you can't use Font Awesome and Fork Awesome at the same time. You will need to rebuild Fork Awesome and change the CSS prefix to whatever you feel like, but not fas, fab or icon...

I'm aware of that (fun fact: it previously worked for quite a few icons). Also, as I mentioned above, icon-... (not to confuse with a icon class) is what MFizz uses (I hope to get rid of that as soon as this FA has what it's missing) and it's not clashing with either FAs.

In any case, index.html now works. But about.html, not yet (note: the mf class is just a temp class to differentiate the MFizz icons from FA's ones).

xuv commented 5 years ago

Glad you found a solution. I'm going to be closing this issue then.

Thanks for mentioning the differences in naming for fa-dev-to. Since this icon was added post fork for both project, it is expected that there are incompatibilities. These projects are taking two very distinct directions. There is a file to ease the transition, but ultimately, people will have to choose one or the other. Or build their own.

You're welcome to create a new icon request for fa-sass or other missing icons in different issues if you wish. And good luck on the personal website.

Berkmann18 commented 5 years ago

@xuv Well, it's mostly resolved, I'll have a look at it sometime in a few days (whenever I can) and see why icons such as fa-html5 and fa-database are replaced by a character square unlike the rest (a bit strange no?).

Thanks for mentioning the differences in naming for fa-dev-to. Since this icon was added post fork for both project, it is expected that there are incompatibilities. These projects are taking two very distinct directions. There is a file to ease the transition, but ultimately, people will have to choose one or the other. Or build their own.

That makes sense, is there a process in place where new icons added to FontAwesome are going in a pipeline/list/board to be added to ForkAwesome or do you not take into account what was added since the fork happened? The reason, I'm asking this is because FontAwesome had some additions (fa-sass being one of them) and I was wondering if, like the pull-bot, there's something in place to deal with that.

You're welcome to create a new icon request for fa-sass or other missing icons in different issues if you wish. And good luck on the personal website.

Okay, I'll do that when I'm free and also check if the icons that MFizz has which FA doesn't were already suggested. Thank you 😄.

xuv commented 5 years ago

That makes sense, is there a process in place where new icons added to FontAwesome are going in a pipeline/list/board to be added to ForkAwesome or do you not take into account what was added since the fork happened?

There are no plans like this. FontAwesome doubled the number of icons they added since 4.7. And I don't think we should plan to stay compatible. We are doing our best to ease the transition for people who want to, but our public is probably quite different. And the direction we took is also quite different. I hope that makes sense. Now, we are always open to add new icons if there is a community use for them, whether they exist in Font Awesome or not.

xuv commented 5 years ago

And sorry for closing the issue a little early. It seems to me though that this is not a problem related to Fork Awesome at all. I might be wrong though.

Berkmann18 commented 5 years ago

There are no plans like this. FontAwesome doubled the number of icons they added since 4.7. And I don't think we should plan to stay compatible. We are doing our best to ease the transition for people who want to, but our public is probably quite different. And the direction we took is also quite different. I hope that makes sense. Now, we are always open to add new icons if there is a community use for them, whether they exist in Font Awesome or not.

That's understandable.

And sorry for closing the issue a little early. It seems to me though that this is not a problem related to Fork Awesome at all. I might be wrong though.

You're probably right, I need to double check and see if I can reproduce that scenario elsewhere and see where the problem lies.

EDIT: You're right, it was on my side.