facebookアイコンを表示させたい

下記にコード表を添付しているのですが、
コード内のnav-mainの最後のliにfacebookアイコンを表示させたいです。
headへのfontawesome指定も行い表示させようとしましたが、うまくいきません。

表示させたいアイコンはこちらとなります。

どなたか教えていただけると幸いです。
よろしくお願いいたします。

html
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <meta name="viewport" content="width=device-width, initial-scale=1.0">
6        <title>タイトルタイトルタイトル</title>
7        <meta name="description" content="ディスクリプションディスクリプションディスクリプション">
8        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
9        <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&family=Lora:wght@400;600&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap" rel="stylesheet">
10        <link rel="stylesheet" href="css/style.css">
11        <link rel="stylesheet" href="css/responsive.css">
12        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
13    </head>
14    <body>
15        <div id="top-wrapper">
16            <div class="container">
17                <img class="top-logo" src="ダミーダミーダミー" alt="トップイメージ">
18            </div>
19        </div>
20        <header>
21            <div class="container header-flexbox">
22                <div><a href="index.html"><img class="header-logo" src="ダミーダミーダミー" alt="ナビゲーションロゴ"></a></div>
23                <nav>
24                    <ul class="nav-main">
25                        <li><a href="#">ダミーダミー</a></li>
26                        <li><a href="#">ダミーダミー</a></li>
27                        <li><a href="#">ダミーダミー</a></li>
28                        <li><a href="#">ダミーダミー</a></li>
29                        <li><a href="#">ダミーダミー</a></li>
30                        <li><a href="#">ダミーダミー</a></li>
31                        <li><a href="#"></a></li><!--<i class="fab fa-facebook-square"></i>で表示されるfacebookアイコンを入れたいです-->
32                    </ul>
33                </nav>
34            </div>
35        </header>
36    </body>
37</html>

css
1@charset "UTF-8";
2* {
3    box-sizing: border-box;
4}
5html {
6    font-size: 100%;
7}
8body {
9    font-family: 'Lora', serif;
10    font-family: 'Noto Serif JP', serif;
11}
12a {
13    text-decoration: none;
14}
15h2, h3, p {
16    font-weight: normal;
17}
18.container {
19    width: 1170px;
20    padding: 0 15px;
21    margin: 0 auto;
22}
23#top-wrapper {
24    min-height: 100vh;
25    background-image: url(ダミーダミーダミー);
26    background-size: cover;
27    background-position: center top;
28    background-repeat: no-repeat;
29}
30.top-logo {
31    position: absolute;
32    top: 50%;
33    left: 50%;
34    width: 20%;
35    -webkit-transform: translate(-50%, -50%);
36    -moz-transform: translate(-50%, -50%);
37    transform: translate(-50%, -50%);
38    z-index: 100;
39}
40header {
41    height: 80px;
42    width: 100%;
43    background-color: #f7f7f7;
44    position: sticky;
45    top: 0;
46    /*position :fixed;
47    top: 0;
48    z-index: 100;*/
49}  
50.header-flexbox {
51    display: flex;
52    justify-content: space-between;
53}
54.header-logo {
55    width: 55px;
56    margin-top: 13px;
57}
58.nav-main {
59    display: flex;
60    list-style: none;
61    margin-top: 27px;
62    font-size: 1rem;
63    text-transform: uppercase;
64}
65.nav-main li {
66    margin-left: 50px;
67    letter-spacing: 5px;
68}
69.fa {
70    /*facebookアイコンの記述箇所*/
71}
72.nav-main a { 
73    color: black;
74    position: relative;
75    display: inline-block;
76}
77.nav-main a::after {
78    position: absolute;
79    bottom: -10px;
80    left: 0;
81    content: '';
82    width: 100%;
83    height: 1px;
84    background: #333;
85    transform: scale(0, 1);
86    transform-origin: right top;
87    transition: transform .3s;
88}
89.nav-main a:hover::after {
90    transform-origin: left top;
91    transform: scale(1, 1);
92}
93

Lhankor_Mhy

2020/12/22 12:05

ご提示のコードを試してみましたが、当方の環境では問題なく表示されました。ローカルでHTMLをダブルクリックするなどして、表示させていませんか？

user20

2020/12/22 12:25

説明不足となってしまい、申し訳ございません。 htmlでのの記載でもフィスブックアイコンは表示されるのですが、 fontawesomeサイトでので表示される四角の中にfの文字があるアイコンを表示させたいと思っています。 htmlのは訂正させていただきます。お手数おかけしますが、よろしくお願いいたします。