Why are only certain font awesome icons appearing via css?

Question

I am trying to apply a FontAwesome icon to a check box but only certain icons are appearing while others are not.

The icon I want to appear is the ship icon. I am able to make it work inside a div using <i class="fas fa-ship"></i> but when trying to make it appear via CSS it is not showing up - yet other icons do.

Not Working

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

input[type=radio].with-font,
input[type=checkbox].with-font {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

input[type=radio].with-font ~ label:before,
input[type=checkbox].with-font ~ label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f042";
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #535353;
    width: 1.4em;
}

Working (Airplane)

@import url(//netdna.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.css);

input[type=radio].with-font,
input[type=checkbox].with-font {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

input[type=radio].with-font ~ label:before,
input[type=checkbox].with-font ~ label:before {
    font-family: FontAwesome;
    display: inline-block;
    content: "\f072";
    letter-spacing: 10px;
    font-size: 1.2em;
    color: #535353;
    width: 1.4em;
}

I did verify that the ship icon is a free icon so not sure why it is not working via CSS.

Answer 1

Setting the font-family and font-weight will fix your issue, for Font Awesome 5 you set it like this:

font-family: "Font Awesome 5 Free";
font-weight: 900;

You also used the wrong Unicode, it's:

content: "\f21a";

Example here: https://codepen.io/anon/pen/ZdgLZx