Asciidoctor :: Discussion

Small Issues with Font Awesome Inline Icons [SOLVED]

_‹ Previous Topic Next Topic _›

Classic

List

Threaded

7 messages Options

TheMagician

Oct 10, 2019; 9:10am

Small Issues with Font Awesome Inline Icons [SOLVED]

This post was updated on Oct 10, 2019; 11:57pm.

I've noticed some strange behavior when using Font Awesome inline icons.

1) Some icons get mirrored horizontally.
The icon "ambulance" for example is shown driving to the right on Font Awesome. However, as an inline icon in the HTML output it drives to the left. (by the way, in ASCIIDoctor-PDF's output the ambulance drives to the right, as expected).

2) Some icons don't show
I could not yet find a rule to this behavior but some of the icons just don't show on the HTML page (even though the code is embedded correctly in the HTML source).
Working: bullseye, bullhorn, comments
Not Working: mail-bulk, comments-dollar, lightbulb
It seems to me like all the icons that have a hyphen in their name don't show. However, the lightbulb is written without a hyphen and still doesn't show so I'm not sure what the pattern is here.

mojavelinux

Oct 10, 2019; 10:11am

Re: Small Issues with Font Awesome Inline Icons

Administrator

Keep in mind the HTML converter uses Font Awesome 4, not Font Awesome 5.

See https://fontawesome.com/v4.7.0/icons/

Asciidoctor PDF uses Font Awesome 5 with shims for Font Awesome 4.

The switch to Font Awesome 5 in the HTML converter is very breaking, so we cannot do it before Asciidoctor 3.

-Dan

On Thu, Oct 10, 2019 at 3:10 AM TheMagician [via Asciidoctor :: Discussion] <[hidden email]> wrote:

I've noticed some strange behavior when using Font Awesome inline icons.

1) Some icons get mirrored horizontally.
The icon "ambulance" for example is shown driving to the right on Font Awesome. However, as an inline icon in the HTML output it drives to the left. (by the way, in ASCIIDoctor-PDF's output the ambulance drives to the right, as expected).

2) Some icons don't show
I could not yet find a rule to this behavior but some of the icons just don't show on the HTML page (even though the code is embedded correctly in the HTML source).
Working: bullseye, bullhorn, comments
Not Working: mail-bulk, comments-dollar, lightbulb
It seems to me like all the icons that have a hyphen in their name don't show. However, the lightbulb is written without a hyphen and still doesn't show so I'm not sure what the pattern is here.

If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/Small-Issues-with-Font-Awesome-Inline-Icons-tp7211.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

... [show rest of quote]

Dan Allen | @mojavelinux | https://twitter.com/mojavelinux

TheMagician

Oct 10, 2019; 11:57pm

Re: Small Issues with Font Awesome Inline Icons

That explains it. Thank you!

Perhaps the third paragraph of chapter 45 of the manual could be changed to:

Alternatively, you can have Asciidoctor “draw” icons using the Font Awesome 4.7 font-based icon set.

mojavelinux

Oct 10, 2019; 11:58pm

Re: Small Issues with Font Awesome Inline Icons

Administrator

Indeed. If you'd like to propose that change, I'll merge it in.

Best,

-Dan

On Thu, Oct 10, 2019 at 5:57 PM TheMagician [via Asciidoctor :: Discussion] <[hidden email]> wrote:

That explains it. Thank you!

Perhaps the third paragraph of chapter 45 of the manual could be changed to:

Alternatively, you can have Asciidoctor “draw” icons using the Font Awesome 4.7 font-based icon set.

If you reply to this email, your message will be added to the discussion below:
https://discuss.asciidoctor.org/Small-Issues-with-Font-Awesome-Inline-Icons-tp7211p7216.html

To start a new topic under Asciidoctor :: Discussion, email [hidden email]
To unsubscribe from Asciidoctor :: Discussion, click here.
NAML

Dan Allen | @mojavelinux | https://twitter.com/mojavelinux

Tobi

Dec 04, 2019; 10:59am

Re: Small Issues with Font Awesome Inline Icons

Is there an option to pass on the style (such as far or fas) within an adoc file at the moment?

Alexander Schwartz

Dec 04, 2019; 9:52pm

Re: Small Issues with Font Awesome Inline Icons

The current HTML5 output uses FontAwesome 4.7

The far/fas style was added in FontAwesome 5 AFAIK

You can follow the discussion on upgrading AsciiDoctor to FontAwesome 5 on GitHub.

So the answer to your question is "no" considering out-of-the-box options.

There is always the chance of pass-through content (with the caveat mixing HTML with AsciiDoc and making the result less maintainable) or writing an extension of an inline macro that supports FA 5.

Alexander Schwartz (alexander.schwartz@gmx.net)
https://www.ahus1.de

Tobi

Dec 05, 2019; 1:26am

Re: Small Issues with Font Awesome Inline Icons

Thank you, Alexander! I got this now.