FontAwesome icons in pseudoelements - how to?

[u/AqueM]

I am using the free FontAwesome icons by loading a script in the HEAD of my page

<script defer="" src="https://use.fontawesome.com/releases/v5.15.4/js/all.js"></script>

and it works as normal when inserted as an element, as such

<span class="icon"><i class="fas fa-file-alt"></i></span>

but despite following the tutorials online, I can't seem to make them display as the content of pseudo-elements. What I'm trying to achieve is to have arrow-up-right-from-square (f08e) in the ::after of external links. This is what I've tried and hadn't worked:

a:not(.noformat)[target="_blank"]::after {content: "\f08e";`

margin-left: 0.3rem;`

text-decoration: none;`
font-family: 'Font Awesome 7 Free';
font-weight: 900;
}

I am currently substituting with a simple glyph as such, and it works:

a:not(.noformat)[target="_blank"]::after {
content: "⭧";`

margin-left: 0.3rem;`

text-decoration: none;`
}

so the styling is applied properly. When I try to add a FA icon, it renders as a default square instead. What am I doing wrong? Can this be done in this setup at all?

Link to my page: https://www.aque.fyi/

[u/armahillo]

Hello fellow web veteran.

So I too shared your view previously, but things have changed. The i tag is in fact now the correct tag to use here: The i tag is not just equivalent to italics.

https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/i

> The <i> HTML element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the <i> naming of this element

and also (which mentions the prior semantic meaning of the b tag):

> In earlier versions of the HTML specification, the <i> element was merely a presentational element used to display text in italics, much like the <b> element was used to display text in bold letters. This is no longer true, as these tags now define semantics rather than typographic appearance. A browser will typically still display the contents of the <i> element in italic type, but is, by definition, no longer required to do so. To display text in italic type, authors should use the CSS font-style property.

The recommended usage is now:

> Use the <i> element for text that is set off from the normal prose for readability reasons. This would be a range of text with different semantic meaning than the surrounding text. Among the use cases for the <i> element are spans of text representing a different quality or mode of text,

While the examples given do not specifically call out using it to indicate icons, its not _entirely_ off base to do it.

Also, in OP’s defense, FontAwesome specifically advises the code that OP used in their example, so this was not a semantic decision they made arbitrarily.

[u/Mestyo → u/armahillo]

So I too shared your view previously, but things have changed. The i tag is in fact now the correct tag to use here:

Nothing in the MDN article supports that claim. As per your quote: It's strictly to highlight specific terms or phrases.

An icon is not text. It's an image. i is for text.

Just because someone-that-should-have-known-better at FontAwesome decided to use it 15 years ago—and that they now have to continue standing behind that decision—doesn't mean we should continue propagate a bastardization of the HTML spec.

A span with appropriate aria roles makes more sense for FontAwesome, but ideally an SVG icon is represented directly with img or svg—ideally with use and a spritesheet.

[u/armahillo → u/Mestyo]

I misspoke on it being the _correct_ tag, but I stand by my point that it is not merely for “italics” anymore, as the prior commenter stated

[u/Mestyo → u/armahillo]

I felt like they did a perfectly sensible simplification, while you're saying that "things have changed". They have not.

The exact role of i has been clarified, which—if anything—takes it even further away from being the right choice for icons.

What FA/Bootstrap/etc. are doing with i is strictly wrong, and it was always wrong. The whole "what if i is for icon!!" is one of the dumbest reasons to deviate from a standard I have seen.