0

I am using unicode as per cheetsheet: https://fontawesome.com/v5/cheatsheet/free/solid

I tried changing font-weight as per answer here but it hasnt helped: Font awesome 5 on pseudo elements

Maybe the issue is in css I linked? I dont know where to get other css version if there is newer.

.icon {
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Regular', 'Font Awesome 5 Brands', 'Arial';
  font-size: 18px;
  font-weight: 900;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" />
<div><span class="icon brand">&#xf834;</span>airbnb</div>
<div><span class="icon">&#xf42c;</span>amazon-pay</div>
<div><span class="icon">&#xe059;</span>bacteria</div>
Toniq
  • 3,918
  • 9
  • 42
  • 96

1 Answers1

0

The Unicode for the first and last icons are incorrect if you are using just Font Awesome 5.

  • &#xf834; doesn't exist in any icon library or in Unicode at all.

  • &#xe059; matches with glyphicon-facetime-video from Bootstrap Icons and replay_10 from Google Material Icons. The reason why it didn't show up as either is because Bootstrap Icons needs the class glyphicon and Google Material needs the class material-icons.

Moreover Font Awesome also needs a class assigned to it's element. The CSS class in OP code, .icon is sufficient (it has the FA font-family property), but if you don't have that, the built-in classes are adequate as well (free versions are: fa, fas, and fab).

HTML
With Unicode <i class="fas">&#xf780;</i>
Without Unicode <i class="fas fa-biohazard"></i> 

:root,
body {
  font: 2ch/1 'Segoe UI'
}

.fab,
.fas {
  margin: 2px 3px;
  font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Regular', 'Font Awesome 5 Brands', 'Arial';
  font-size: 1.5rem;
  font-weight: 900;
}
<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet">

<div><i class="fas fa-bed"></i> Airbnb Locator</div>
<div><i class="fab">&#xf42c;</i> Amazon Pay</div>
<div><i class="fas fa-biohazard"></i> COV-ID Status</div>
zer00ne
  • 36,692
  • 5
  • 39
  • 58
  • f834 does exist, go to cheetsheet linked above and to brands tab. e059 is in free tab. – Toniq Feb 13 '22 at 09:29
  • The reason the dont show because I can see they are not present in here https://use.fontawesome.com/releases/v5.7.2/css/all.css. If I download font awesome5 library from their website I can see css file having these symbols. Maybe there is newer version of css available online? – Toniq Feb 13 '22 at 09:32
  • I used https://www.w3schools.com/icons/icons_reference.asp#header_0 Doesn't really matter, as long as you use class `fas` and `fab` or even `fa` you shouldm't have any problems...you did see my example, right? In fact, as long as the element has this CSS it will work: `font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands'` – zer00ne Feb 13 '22 at 10:37
  • I am working with unicode, I dont want fa classes. – Toniq Feb 13 '22 at 16:28