Ułożenie napisu na obrazku w Bootstrap 4

Witam serdecznie,
Robię mały projekt w Bootstrap 4 i napotkałem na mały problem.

Mam taką stronę (podgląd problemu) http://serwer1356363.home.pl/_nauka/
Chciałbym uzyskać taki efekt: https://ibb.co/Hddz7gG

Tj na pomarańczowych "planszach" ma się znaleŹć:

• strzałka (jest dodana w kodzie - ale nie wyświetla się na stronie),
• napis "poznaj ofertę" ma być na dole pomarańczowego boxa

Mój aktualny kod:

<section class="front-banners">
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6 pb-4 mb-md-1">
                    <div class="card bg-dark text-white">
                        <a href="/produkty"><img class="card-img" src="/img/front1.jpg" alt="Kuchnie"></a>
                        <a href="/produkty">
                            <div class="card-img-overlay front-banner-overlay">
                                <h5 class="card-title">Kuchnie </h5>
                                <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                                <p>Poznaj ofertę</p>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-md-6 pb-4 mb-md-1">
                    <div class="card bg-dark text-white">
                        <a href="/produkty"><img class="card-img" src="/img/front2.jpg" alt="Szafy"></a>
                        <a href="/produkty">
                            <div class="card-img-overlay front-banner-overlay">
                                <h5 class="card-title">Szafy </h5>
                                <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                                <p>Poznaj ofertę</p>
                            </div>
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </section>

.front-banner-overlay{
    background-color:#FFC700;
    width: 180px;
    height: 180px;
    margin: 20px;
}

.front-banner-overlay h5{
    font-family: Inter;
    font-style: normal;
    font-weight: 500;
    font-size: 36px;
}

.front-banner-overlay p{
    font-family: Inter;
    font-style: normal;
    font-size: 13px;
    line-height: 16px;
}

W jaki sposób mogę to zrobić?

Bardzo proszę o pomoc :)

W kodzie masz tyko <i> o klasie fa-long-arrow-righ,
ale nigdzie w css nie definiujesz jego wyglądu.