Skip to content

Adding a font-awesome icon for external links#767

Open
panglesd wants to merge 1 commit intoocaml:masterfrom
panglesd:style-external-links
Open

Adding a font-awesome icon for external links#767
panglesd wants to merge 1 commit intoocaml:masterfrom
panglesd:style-external-links

Conversation

@panglesd
Copy link
Copy Markdown
Collaborator

This is a PR to address Issue #669.

It adds an icon after external links. The icon is taken from here: https://fontawesome.com/v6.0/icons/up-right-from-square (it's the only "external link" icon that is not a Pro icon):

image

I tried to follow both suggestions: making the svg inline in the css, and using currentColor. However, this is not that easy: one cannot manipulate the color of an svg pseudo-element that easily.
I came up with the following ugly hack solution: the svg is a mask, and the background color is currentColor.
This comes with a price: with both its prefix and unprefixed version, caniuse report that only 95.41% of users have a browser that supports this functionnality. To distinguish between desktop and mobile, its respectively 96.52% and 95.16%.
Here are some details:

  • 0.73% as IE users
  • 0.43% as old firefox versions (version before 53)
  • 1.19% as "opera Mini" users (in fact, support is unknown, but I can't check!)
  • 0.28% as "Android Browser" users
  • 1.07% as "UC Browser for Internet" users

For those people, the filter won't work, so instead of the currentColor external link icon, they will have a currentColor filled square...

How acceptable do you think that is? If that's not acceptable, there are to options:

  • Give up on currentColor. We can use the widely supported (99.95% for desktop) content property. The icon will always be black.
  • Give up on inlining the svg in the css, adding the svg as an element (instead of a pseudo-element) and giving it the color currentColor.

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants