Upgrade to FontAwesome 5 #2535

ggrossetie · 2018-01-13T10:06:40Z

We should decide if we want to use SVG icons with JavaScript or stick with Web Fonts.
Useful links:

SVG with JS: https://fontawesome.com/get-started/svg-with-js
Web Fonts: https://fontawesome.com/get-started/web-fonts-with-css
Upgrading from version 4: https://fontawesome.com/how-to-use/upgrading-from-4

mojavelinux · 2018-01-15T06:32:55Z

I think we should target this upgrade for 1.6.0.

I'm open to using SVG as long as it doesn't require any additional local files. One of the main reasons we introduced font-based icons was to allow icons to be used without having to lug around other files. I'm not stuck on the font-based part. So if we can offer the same experience, I'm all for SVG. We also need to find a way to allow them to be colorized.

ggrossetie · 2018-01-15T12:07:34Z

I'm open to using SVG as long as it doesn't require any additional local files.

No, as far as I know we just need to use a JavaScript to convert icon:

<head>
  <!--load everything-->
  <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
</head>
<body>
  <!--user icon in two different styles-->
  <i class="fas fa-user"></i>
  <i class="far fa-user"></i>
  <!--brand icon-->
  <i class="fab fa-github-square"></i>
</body>

Having said that the JavaScript file may load more external ressources.

I think we should target this upgrade for 1.6.0.

Sound fair enough.

We also need to find a way to allow them to be colorized.

Yes we can:

<i class="fas fa-circle" style="color:Tomato"></i>

ggrossetie · 2018-11-29T22:44:07Z

It would be nice to be able to do "server-side" rendering in Asciidoctor.js: https://fontawesome.com/how-to-use/on-the-web/other-topics/server-side-rendering

john-cj · 2019-02-11T11:57:48Z

Is there an option to see which version of Font Awesome is currently used? I already tried

asciidoctor -h icons
asciidoctor -h fontawesome

mojavelinux · 2019-02-11T12:01:32Z

https://github.com/asciidoctor/asciidoctor/blob/master/lib/asciidoctor.rb#L348

mojavelinux · 2019-02-11T12:01:46Z

We are on Font Awesome 4 because Font Awesome 5 is basically a different library.

john-cj · 2019-02-11T14:16:30Z

I see, thanks for link.

OrangeDog · 2019-10-21T16:32:10Z

FWIW I would much prefer continuing with a pure-CSS instead of a JS solution.
The only thing you really have to do is add multiple CSS files (e.g. all and shims).
Or, to be more specific, fontawesome and solid and check you're not using any removed aliases.

Server-side SVG rendering would be even better.

ggrossetie · 2019-10-21T21:05:23Z

Hopefully if we get an extension point you would be able to implement it client-side with CSS (+font), JS or server-side.

If we just want to upgrade then I think we should keep using CSS + font.

We are on Font Awesome 4 because Font Awesome 5 is basically a different library.

I didn't do a complete review but if we stay on CSS + font the migration seems straightforward no?
The new icon prefix (fab, fas, far) could be challenging though.

mojavelinux · 2019-10-21T22:55:25Z

I'm not opposed to updating to FontAwesome 5. It just has to be handled very carefully so as not to break existing users. There are a lot of people who rely on this feature. If we handle it badly, it won't be pretty. And it definitely calls for a major version.

@Mogztter wrote:
The new icon prefix (fab, fas, far) could be challenging though.

That's what I'm most concerned about. We did make this transition in Asciidoctor PDF, so we already have some understanding of what needs to happen.

@OrangeDog wrote:
The only thing you really have to do is add multiple CSS files

We can't have a cavalier attitude about this, so nothing is "the only thing you really have to do". This is going to be a challenge no matter how you look at it.

mojavelinux · 2019-10-21T22:57:13Z

@Mogztter wrote:
If we just want to upgrade then I think we should keep using CSS + font.

That's probably the right transitional step.

@mojavelinux wrote:
We are on Font Awesome 4 because Font Awesome 5 is basically a different library.

I still stand behind this statement. What FontAwesome did by renaming all the icons was to alienate their existing users. It was a huge mistake IMO.

OrangeDog · 2019-10-22T11:21:04Z

That's why they provide the v4 compatibility shim, which I suggested. It really is that easy if you want minimum effort.

mojavelinux · 2019-10-22T17:56:21Z

It's good to know that the compatbility shim does provide that drop-in replacement. Even with the shim, the icons have completely changed, so it still warrants a major version. (And from the feedback we've received on Asciidoctor PDF, not everyone is happy with the new look).

bric3 · 2020-04-15T16:17:36Z

@OrangeDog even though there is a compatibility shim it's not compatible with the solid icon set

<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/solid.min.js" integrity="sha256-UM1HRu0Wd16k4L5wgrk17BYWzKkjZSe0BYr5T5qw2Ww=" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/brands.min.js" integrity="sha256-z0T3r+4uTjAkB5CHxybF9RQwAzHEdFB5+hJe/pGAcPg=" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/fontawesome.min.js" integrity="sha256-NP9NujdEzS5m4ZxvNqkcbxyHB0dTRy9hG13RwTVBGwo=" crossorigin="anonymous"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/v4-shims.min.js" integrity="sha256-prFmieX9aRVhOV/ldXGklUUhS7NRBQUijQU4HcdnO8Q=" crossorigin="anonymous"></script>

In the above code, you have to either remove solid.min.js or v4-shims.min.js. I believe their upgrade documentation may be wrong (FortAwesome/Font-Awesome#16477).

OrangeDog · 2020-04-16T09:04:25Z

@bric3 it works for me, using all.min.css and v4-shims.min.css.
Following your link, it looks like you weren't using the default asciidoctor style with the icon mappings?

bric3 · 2020-04-16T09:57:27Z

@OrangeDog For me this does not work as expected, because the rendered asciidoc, is used in a page with FA5 that rely on element subsitution (with JS).

So this is interpreted because there's the fa class.

<i class="fa icon-tip" title="Tip"></i>

If I don't use the js files, this work, but the rest of the page is broken.

mojavelinux · 2020-06-08T07:59:01Z

To aid with compatibility, we might consider allowing the icon-based font provider to be configured via an attribute. That would allow the continued use of Font Awesome 4 while also providing a path to use Font Awesome 5. It would be a bit more work, but it could help resolve this impasse we find ourselves at.

ggrossetie · 2020-06-08T19:35:10Z

To aid with compatibility, we might consider allowing the icon-based font provider to be configured via an attribute. That would allow the continued use of Font Awesome 4 while also providing a path to use Font Awesome 5. It would be a bit more work, but it could help resolve this impasse we find ourselves at

We should be careful to not lock ourselves if we want to support alternative font icon sets and/or introduce a pluggable adapter for integrating icons libraries (similar to what we done for syntax highlighter). My point is to choose wisely how to configure the icon-based font provider.

Neved4 · 2020-06-12T15:45:35Z

To aid with compatibility, we might consider allowing the icon-based font provider to be configured via an attribute. That would allow the continued use of Font Awesome 4 while also providing a path to use Font Awesome 5. It would be a bit more work, but it could help resolve this impasse we find ourselves at.

I agree entirely with Dan and Guillaume points here 🖤💛

Providing the ability to use version 5 and the upcoming 6 one while keeping a way to use version 4 how it is already now will both avoid breaking compatibility in existing documents and giving people the choice to use newer versions or even alternative font icon sets. Until the compatibility shim of the upgrade is figured out this is the way to go.

As of now, those users who want to use Font Awesome 5 already need to know that it's possible to do it by using a head docinfo file as in the User Manual. In order to do this, one needs to use a docinfo.html file with a <script src="https://kit.fontawesome.com/kitnumber.js"></script> line. We could add a small section in the documentation that demonstrates this.

nebrass · 2020-08-05T22:18:58Z

@mnrvwl can you please add this section to the documentation please?

Thank you !

lfvjimisola · 2021-10-28T17:27:50Z

Reading the comments it looks as if the upgrade Font Awesome 5 was never made. Font Awesome 6 is now latest with even more useful icons. What are your thoughts on using it?

lyz-code · 2022-04-01T10:57:42Z

Any new thoughts on this topic?

OrangeDog · 2022-06-16T16:16:23Z

Font Awesome 6 does not appear to have changed any existing icon names. Therefore the v4-shims still work.

mojavelinux mentioned this issue Apr 22, 2018

Upgrade to Font Awesome 4.7 #2569

Closed

mojavelinux added this to the v1.6.0 milestone Apr 22, 2018

ggrossetie mentioned this issue Aug 8, 2018

Font Awesome CDN uses old version #2836

Closed

mojavelinux mentioned this issue Dec 30, 2018

Support latest free or paid font awesome pro asciidoctor/asciidoctor-reveal.js#235

Closed

mojavelinux modified the milestones: v1.6.0, M2 Jan 9, 2019

ghost mentioned this issue Mar 31, 2019

Font Awesome5 #3222

Closed

obilodeau mentioned this issue Jan 11, 2020

Missing brand icons in v3.0 asciidoctor/asciidoctor-reveal.js#304

Closed

mojavelinux mentioned this issue Oct 27, 2020

resolves #3694 add support for style attribute to icon macro #3741

Open

mojavelinux mentioned this issue Jan 12, 2023

consider add a new icon macro font mode attribute to fit font awesome 6 #4400

Closed

mojavelinux mentioned this issue May 31, 2023

Font Awesome should use jsDelivr CDN #4284

Open

yann-soubeyrand mentioned this issue Jun 28, 2023

Add header docinfo support asciidoctor/asciidoctor-reveal.js#510

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade to FontAwesome 5 #2535

Upgrade to FontAwesome 5 #2535

ggrossetie commented Jan 13, 2018

mojavelinux commented Jan 15, 2018

ggrossetie commented Jan 15, 2018

ggrossetie commented Nov 29, 2018

john-cj commented Feb 11, 2019 •

edited

Loading

mojavelinux commented Feb 11, 2019

mojavelinux commented Feb 11, 2019

john-cj commented Feb 11, 2019

OrangeDog commented Oct 21, 2019 •

edited

Loading

ggrossetie commented Oct 21, 2019 •

edited

Loading

mojavelinux commented Oct 21, 2019

mojavelinux commented Oct 21, 2019

OrangeDog commented Oct 22, 2019

mojavelinux commented Oct 22, 2019 •

edited

Loading

bric3 commented Apr 15, 2020

OrangeDog commented Apr 16, 2020 •

edited

Loading

bric3 commented Apr 16, 2020

mojavelinux commented Jun 8, 2020

ggrossetie commented Jun 8, 2020

Neved4 commented Jun 12, 2020

nebrass commented Aug 5, 2020

lfvjimisola commented Oct 28, 2021

lyz-code commented Apr 1, 2022

OrangeDog commented Jun 16, 2022

Upgrade to FontAwesome 5 #2535

Upgrade to FontAwesome 5 #2535

Comments

ggrossetie commented Jan 13, 2018

mojavelinux commented Jan 15, 2018

ggrossetie commented Jan 15, 2018

ggrossetie commented Nov 29, 2018

john-cj commented Feb 11, 2019 • edited Loading

mojavelinux commented Feb 11, 2019

mojavelinux commented Feb 11, 2019

john-cj commented Feb 11, 2019

OrangeDog commented Oct 21, 2019 • edited Loading

ggrossetie commented Oct 21, 2019 • edited Loading

mojavelinux commented Oct 21, 2019

mojavelinux commented Oct 21, 2019

OrangeDog commented Oct 22, 2019

mojavelinux commented Oct 22, 2019 • edited Loading

bric3 commented Apr 15, 2020

OrangeDog commented Apr 16, 2020 • edited Loading

bric3 commented Apr 16, 2020

mojavelinux commented Jun 8, 2020

ggrossetie commented Jun 8, 2020

Neved4 commented Jun 12, 2020

nebrass commented Aug 5, 2020

lfvjimisola commented Oct 28, 2021

lyz-code commented Apr 1, 2022

OrangeDog commented Jun 16, 2022

john-cj commented Feb 11, 2019 •

edited

Loading

OrangeDog commented Oct 21, 2019 •

edited

Loading

ggrossetie commented Oct 21, 2019 •

edited

Loading

mojavelinux commented Oct 22, 2019 •

edited

Loading

OrangeDog commented Apr 16, 2020 •

edited

Loading