Font awesome unicode some icons not displaying

Question

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>

What icons were you expecting for Airbnb and Bacteria? – zer00ne Feb 12 '22 at 23:01 — zer00ne, Feb 12 '22 at 23:01
Icons that are on the cheetsheet linked above. – Toniq Feb 13 '22 at 09:26 — Toniq, Feb 13 '22 at 09:26

score 0 · Answer 1 · answered Feb 13 '22 at 03:21

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

 doesn't exist in any icon library or in Unicode at all.
 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"></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>

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

score -1 · Answer 2 · edited Sep 06 '22 at 21:35

Firstly, you need to use the link of FontAwesome either CDN in index.html(main file) or import css in style.css

cdn: <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">

import in css file: @import url("https://use.fontawesome.com/releases/v5.13.0/css/all.css");

eg li::before
selector::before{     
    content: "\f007";
    font-family: "Font Awesome 5 Free";
}

Font awesome unicode some icons not displaying

2 Answers2