if you're using images for the backgrounds of the <a>, the image covers the whole thing, including hover mechanics; however, you can still use images, just on the <li> style instead!

   <li class="col-lg-12 col nav-item text-center rounded" style="background-image:url(IMG_LINK_HERE); background-size:cover; background-color:#7ac1c7; margin:3px">
        <a class="text-white btn btn-block btn-outline-secondary active d-flex h-100 border-0" style="text-decoration:none; box-shadow:none;"
        data-toggle="tab" href="#axiomaticone">
           
            <i class="fas fa-user fa-fw m-auto" style="font-size:20px"></i></span>
           
        </a>
    </li>