我的 HTML 中的图标不起作用，我不知道为什么

Question

所以我从 font awsome 中获取了一些图标，但由于某种原因我无法使其工作，图标没有出现，我现在要显示代码， 注： 这是教育用途的 pinterest 克隆版

CSS：

        nav{
            display: flex;
            justify-content: space-evenly;
        }        
        .circle{
            height: 50px;
            width: 50px;
            
            border-radius: 50px;

            overflow: hidden;
            
            display:flex;
            justify-content: center;
            align-items: center;
            margin: 5px;

            transition: 300ms ease-out;
        }
        .circle:hover{
            transform: scale(1.05);
            box-shadow: 0px 0px 100px;
        }
        img, i{
            position:relative;
            width:165px;
        }

HTML：

            <div id="logo" class="circle">
            <img src="./Logo.png" alt="logo">
            </div>
            </div>
            
            <div id="bell" class="circle">
                <a href="#"><i class="fa-solid fa-bell"></i></a>
            </div>
            <div id="notifications" class="circle">
                <a href="#"><i class="fa-solid fa-message"></i></a>
            </div>
            <div id="account" class="circle">
                <a href="#"><i class="fa-solid fa-bell"></i></a>

我试图将它放在一个没有链接的链接中，没有颜色，不同的颜色，我想就是这样了

Answer 1

你错过了课堂上的第一个“法”：

 <div id="bell" class="circle">
    <a href="#"><i class="fa fa-solid fa-bell"></i></a>
 </div>
 <div id="notifications" class="circle">
    <a href="#"><i class="fa fa-solid fa-message"></i></a>
 </div>
 <div id="account" class="circle">
    <a href="#"><i class="fa fa-solid fa-bell"></i></a>
 </div>

此外，CSS 阻止显示图标：

 img, i{
            position:relative;
            width:165px;
        }

165px 的宽度导致了问题。例如，将其设置为 16px 似乎可行。