How to put label under image in navigation bar?

I have a bottom navigation bar and 4 image for each page of my website. I want now to put text under images but I can't find how to do.

I already do with span, div... and nothing work.

<footer class="border-top footer text-muted">

        <div id="footernavbar">
            <div class="row">

                <div class="col-xl-4"></div>
                <a class=" col-md-3 col-sm-3 col-3 col-xl-1" asp-controller="Home" asp-action="Index">
                    <div class="icon">

                        <img src="~/images/homepage.png" />

                    </div>
                </a>
                <a class=" col-md-3 col-sm-3 col-3 col-xl-1" asp-controller="Tour" asp-action="Index">
                    <div class="icon">

                        <img src="~/images/calendar.png" />

                    </div>
                </a>
                <a class=" col-md-3 col-sm-3 col-3 col-xl-1" href="/BuildingSite/CreateToday/">
                    <div class="icon">

                        <img src="~/images/pen.png" />

                    </div>
                </a>
                <a class="col-md-3 col-sm-3 col-3 col-xl-1" href="/User">
                    <div class="icon">
                        <span>
                            <img src="~/images/user.png" />
                        </span>
                        <span>
                            test
                        </span>

                    </div>
                </a>
                <div class="col-xl-4"></div>
            </div>
        </div>
    </footer>

.icon{
    position:relative;
    width:100%;
    height:60px;
}

.icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

For the moment I got that : https://i.imgur.com/YSah00h.png

What I want is that : https://i.imgur.com/Ir5UTjf.png

(For every image, for example I just do it for last image)