Can't design the "See All" button/(fa-circle-right) for my e-commerce website project – Html

So I’m following a YouTube tutorial on how to create responsive product cards for my E-Commerce website project for school. Unfortunately, the tutorial has no "See All" button where it will direct it to all products.

I tried designing the fa class using CSS but it doesn’t change.

Below are my HTML and CSS codes:

<!--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;
}