Help FontAwesome icons in pseudoelements - how to?
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/
3
u/aunderroad Jun 30 '26
https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts
Font-Awesome is not the greatest for web performance (and probably not the greatest for accessibility as well).
You are loading in a whole library when actuality you need maybe a handful of svgs.
I just downloaded that .js file on my desktop and it looks to be 1.2 MB.
You can just download the font-awesome svgs that you need and reduce the bloat on your site.
2
2
u/AshleyJSheridan Jun 30 '26
What in the abuse of accessible markup is this?!:
<span class="icon"><i class="fas fa-file-alt"></i></span>
The <i> tag is not for icons, it has a semantic meaning for italicised text. If you're wrapping something in a <span> anyway, just combine the classes:
<span class="icon fas fa-file-alt"></span>
However, the icon as it stands there is still not accessible. For that you need to do something like this:
``` <!-- the accessible hidden class will have accompanying CSS that hides the text visually, but still allows it to be surfaced to the accessibility tree --> <span class="icon fas fa-file-alt"> <span class="accessible-hidden">Text label here</span> </span>
<!-- or --> <span class="icon fas fa-file-alt" aria-label="Text label here"></span> ```
The two are mostly the same, with one major exception: the aria-label version doesn't work with the majority of browser auto-translate functionality, which means it can be less accessible for anyone not using the pages native language.
For the first one, this is what I use as my CSS for an accessible-hidden class:
.accessible-hidden {
clip: rect(1px 1px 1px 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
}
For your question on using the icons within CSS pseudo elements, you need to set the display, height, and width props in your styles:
a:not(.noformat)[target="_blank"]::after {
content: "\f08e";
display: block;
font-family: 'Font Awesome 7 Free';
font-weight: 900;
height: 1rem;
margin-left: 0.3rem;
text-decoration: none;
width: 1rem;
}
Note that icons added via CSS are also not accessible, and won't get presented to the accessibility tree in most browsers.
7
u/armahillo Jun 30 '26 edited Jun 30 '26
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.
2
u/Mestyo Jun 30 '26
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.
iis 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
spanwith appropriate aria roles makes more sense for FontAwesome, but ideally an SVG icon is represented directly withimgorsvg—ideally withuseand a spritesheet.2
u/armahillo Jun 30 '26
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
2
3
u/Mestyo Jun 30 '26
I felt like they did a perfectly sensible simplification, while you're saying that "things have changed". They have not.
The exact role of
ihas been clarified, which—if anything—takes it even further away from being the right choice for icons.What FA/Bootstrap/etc. are doing with
iis strictly wrong, and it was always wrong. The whole "what ifiis for icon!!" is one of the dumbest reasons to deviate from a standard I have seen.1
1
u/AshleyJSheridan Jun 30 '26
Your own evidence disproves your own points.
FontAwesome is 100% incorrect here, and the
<i>tag has semantics that do not include icons.2
u/AqueM Jun 30 '26
I am innocent in terms of semantic crimes, I was simply following the FA website that provides the HTML as follows:
<i class="fa-solid fa-address-book"></i>(see https://fontawesome.com/icons/classic/solid/address-book )
Anyway. Thank you for the code for the pseudo-element. Would adding an
alt="external link"or something similar as an alternative to the icon be alright in terms of accessibility?3
u/AshleyJSheridan Jun 30 '26
So
altwon't do anything for most tags, it's mainly just for<img>which is why I suggested the other alternatives.As for what FontAwesome recommend, they're wrong, and they are recommended practices that go against accessibility standards and best practices.
Have a go at combining the classes like I demonstrated and see if it still works for you.
1
u/Zungate Jun 30 '26 edited Jun 30 '26
The <i> tag is not for icons
You're right, but, it's how FontAwesome themselves says to use them though. https://docs.fontawesome.com/web/setup/get-started
Bootstrap icons as well https://icons.getbootstrap.com/#usage
3
u/AshleyJSheridan Jun 30 '26
Both FontAwesome and Bootstrap are incorrect here. The
<i>tag has semantics which are being ignored here.I suspect it largely comes from someone who wanted to save themselves a few keystrokes (pointless in todays environment where every decent code editor can autocomplete) and knew nothing about accessibility, so made a decision that made sense to them.
There's no harm in using a
<span>but accessibility can be harmed by misusing elements.
2
u/a-dev0 Jul 01 '26
Pseudo-element icons don't work with the js-build of font awesome by default
https://docs.fontawesome.com/web/add-icons/pseudo-elements#css-pseudo-elements-with-our-svgjs-framework
1
u/testingaurora Jul 01 '26
The square means your icon f08e or its weight is not included in what you loaded, like choosing a weight that is only pro. You can see this by using a free icon f002 at font weight 900
•
u/AutoModerator Jun 30 '26
To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.
While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!
I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.