0

I have a problem with the external link character not showing in a pseudo element style. Other characters are showing.

Font-Awesome 5.0.6 free, CSS/Webfont version, included via CDN: https://use.fontawesome.com/releases/v5.0.6/css/all.css

This works in my normal body content:

<i class="fas fa-external-link-alt"></i>

In CSS, this doesn't work:

a:after {
  font-family: 'Font Awesome 5 Free';
  content: '\f35d';
}

Using another character in the pseudo does work:

a:after {
 font-family: 'Font Awesome 5 Free';
 content: '\f152';
}

According the to documentation the external link icon is part of the FA5 Free set: https://fontawesome.com/icons/external-link-alt?style=solid

Is this a bug or am I missing something?

Edit 1: JS Fiddle example: https://jsfiddle.net/berjcaLy/4/

Edit 2: Accidentally found out that wrapping the <a> tag in <b> or <strong> will make the external link pseudo icon work. (JSfiddle updated, too)

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
kiwiana
  • 47
  • 1
  • 7

1 Answers1

9

Use

font-weight:900

and it has to be 900.

user3339988
  • 404
  • 2
  • 5
  • 12
  • Thanks, I found some other references now, too. It seems to be inconsistent to me though. In FA's Github it's mentioned that "Font Awesome 5 also requires `font-weight: 900;` when you use solid icons in custom css classes", however the `\f152` character worked just fine not being 900 while being fas (solid). GitHub: https://github.com/FortAwesome/Font-Awesome/issues/11946 – kiwiana Feb 21 '18 at 01:56
  • After some more digging, all Font-Awesome 5 Free styles have to be available in the 'Solid' style. All solid styles need to be font-weight:900 if used in own CSS styles. `\f152` is also freely available in 'Regular' which doesn't require the 900 font width - hence it showed. – kiwiana Feb 21 '18 at 21:32
  • For reference: https://fontawesome.com/how-to-use/web-fonts-with-css Solid font-weight: 900 / Regular font weight: 400 / Light font-weight: 300 / Brands font-weight: 400 – kiwiana Feb 21 '18 at 21:42