スマホサイトにボトムナビゲーションを表示したい

以下のサイトにあるスマホサイトへ対するボトムナビゲーションの設置を試しているのですが
うまく表示がされません。
https://pecopla.net/web-column/bottom-navigation#:~:text=%E3%83%9C%E3%83%88%E3%83%A0%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%A8%E3%81%AF%E3%80%81%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3,%E3%81%AE%E3%81%93%E3%81%A8%E3%82%92%E6%8C%87%E3%81%97%E3%81%BE%E3%81%99%E3%80%82

html
1
2<!doctype html>
3<html class="no-js" lang="ja">
4  <head>
5    <meta charset="UTF-8">
6     
7    <title>HTMLの書き方</title>
8    <link rel="stylesheet" href="css/style.css">
9  </head>
10  <body>
11
12<ul class="menu">
13	<li>
14		<a href="index.html"><i class="fas fa-align-justify"></i><br>
15		<span class="iconname">ホーム</span></a>
16	</li>
17	<li>
18		<a href="https://www.yahoo.co.jp/"><i class="fas fa-align-justify"></i><br>
19		<span class="iconname">探す</span></a>
20	</li>
21	<li>
22		<a href="https://www.yahoo.co.jp/"><i class="fas fa-align-justify"></i><br>
23		<span class="iconname">マイページ</span></a>
24	</li>
25    	<li>
26		<a href="https://www.yahoo.co.jp/"><i class="fas fa-align-justify"></i><br>
27		<span class="iconname">買い物カゴ</span></a>
28	</li>
29    	<li>
30		<a href="https://www.yahoo.co.jp/"><i class="fas fa-align-justify"></i><br>
31		<span class="iconname">ご利用案内</span></a>
32	</li>
33</ul>
34  </body>
35</html>

css
1@media(min-width: 768px) {
2	.bottom-menu {
3		display: none;
4	}
5
6
7.menu {
8	position: fixed;
9	left: 0;
10	bottom: 0;
11	background: gray;
12	width: 100%;
13}
14.menu li {
15	display: table;
16	table-layout: fixed;
17	width: 100%;
18	padding: 5px;
19	list-style: none;
20	text-align: center;
21}
22.menu a span {
23	display: block;
24	font-size: 10px;
25}
26}
27
28
29@media(max-width: 769px) {
30	.bottom-menu {
31		display: none;
32	}
33
34
35.menu {
36	position: fixed;
37	left: 0;
38	bottom: 0;
39	background: gray;
40	width: 100%;
41}
42.menu li {
43	display: table;
44	table-layout: fixed;
45	width: 100%;
46	padding: 5px;
47	list-style: none;
48	text-align: center;
49}
50.menu a span {
51	display: block;
52	font-size: 10px;
53}
54}

https://fontawesome.com/icons?from=ioのアイコンを反映させたいです。

記述の問題点について、ご指摘、ご教授頂けますと幸いです。
よろしくお願いします。

追記
現状の表示(ボトムナビゲーション)は以下です

希望の表示(ボトムナビゲーション)は以下です。テキストやアイコンは例

m.ts10806

2021/01/29 10:01

＞https://teratail.com/help/question-tips#questionTips3-4 >「うまく動かない」というだけでは、何も伝わりません。「○○がうまく動きません」とだけ書いても、今起きている事が伝わらなければ問題の見当がつかないのです。

行動規範の内容に同意します

回答1件

ベストアンサー

https://fontawesome.com/icons?from=ioのアイコンを反映させたいです。

これををhead要素の中に入れてみてください。

html
1<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">