无法为我的电子商务网站项目设计“查看全部”按钮/（fa-circle-right）

Question

所以我正在关注关于如何为我的学校电子商务网站项目创建响应式产品卡的 YouTube 教程。不幸的是，该教程没有“查看全部”按钮，可以将其定向到所有产品。

我尝试使用 CSS 设计 fa 类，但它没有改变。

以下是我的 HTML 和 CSS 代码：

<!--for shop category-->
        <div class="shop-wrapper">
            <h1>Shop</h1>
            <div class="shop">
                <div class="content">
                    <img src="products/concrete.png" alt="Cement and Hollow Blocks">
                    <p>Concrete and Masonry</p>
                </div>

                <div class="content">
                    <img src="products/rebars.png" alt="Rebars and GI Wires">
                    <p>Rebars and GI Wires</p>
                </div>

                <div class="content">
                    <img src="products/steels.png" alt="Steels">
                    <p>Steel Products</p>
                </div>

                <div class="content">
                    <img src="products/wood.png" alt="Wood Bar">
                    <p>Wood Produts</p>
                </div>

                    <i class="fa-regular fa-circle-right"></i>

            </div>
        </div>

/**for shop category**/
.shop-wrapper {
    height: 50vh;
}

.shop-wrapper h1 {
    text-align: center;
    padding-top: 50px;
}

.shop {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    align-items: center;
    margin: 50px 0;
    
}
.shop p {
    text-align: center;
    font-size: 15px;
    margin: 0;
    padding-top: 10px;
}

.content {
    width: 20%;
    margin: 15px;
    box-sizing: border-box;
    float: left;
    text-align: center;
    border-radius: 20px;
    cursor: pointer;
    padding-top: 10px;
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
    transition: .4s;
    background-color: #f2f2f2;
}

.content:hover {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transform: translate(0px, -8px);
}

.content img {
    width: 200px;
    height: 250px;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.content p {
    text-align: center;
    padding-top: 0 8px;
    font-size: 20px;
    margin: 0;
    padding: 15px;
    margin-top: 5px;
    background-color: #5aaecc;
    color: #fff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

Answer 1

fa

类代表 font-awesome 部分免费的图标库。

您应该按照他们网站上的说明来包含他们的图标并使它们起作用。

链接：https://fontawesome.com/

Answer 2

首先，在您的 CSS 文件中，您没有为类“fa-regular”和“fa-circle-right”定义样式。其次，如果你想使用图标，你可以使用 font-awesome 更容易开发