Image and text in HTML a tag where the image resizes to fit the container

Question

I have a 482x482 image I want to use with a <nav> container which is defined as follows:

    <nav id="nav">
        <ul class="links">
            <li><a href="/exchange/accueil">
                <img src="{% static 'exchange/images/HomeIconWhite.png' %}"></img>
            </a><p>Accueil</p></li>
            <li><a href="/exchange/recherche_avance">Recherche avancée</a></li>
            <li><a href="/exchange/rajouter">Ajouter une info</a></li>
            {% if user.is_authenticated %}
            <li><a href="/exchange/deconnexion">Déconnexion</a></li>
            {% else %}
            <li><a href="/exchange/connexion">Connexion</a></li>
            {% endif %}
        </ul>
    </nav>

The CSS defining this container is the following:

    #nav {
        color: #ffffff;
        display: -moz-flex;
        display: -webkit-flex;
        display: -ms-flex;
        display: flex;
        -moz-transition: -moz-transform 1s ease, opacity 1s ease;
        -webkit-transition: -webkit-transform 1s ease, opacity 1s ease;
        -ms-transition: -ms-transform 1s ease, opacity 1s ease;
        transition: transform 1s ease, opacity 1s ease;
        background: rgba(255, 255, 255, 0.175);
        height: 4rem;
        line-height: 4rem;
        margin: -4rem auto 0 auto;
        overflow: hidden;
        padding: 0 2rem 0 0;
        position: relative;
        width: calc(100% - 4rem);
        max-width: 72rem;
        z-index: 2;
    }

        #nav ul.divided li {
            border-top-color: #ffffff;
        }

        #nav ul.icons li a.icon:hover:before {
            color: #18bfef;
        }

        #nav ul.icons.alt li .icon:before {
            box-shadow: inset 0 0 0 2px #ffffff;
        }

        #nav ul.icons.alt li a.icon:hover:before {
            box-shadow: inset 0 0 0 2px #18bfef;
        }

        #nav input, #nav select, #nav textarea {
            color: #ffffff;
        }

        #nav a {
            color: #ffffff;
            border-bottom-color: rgba(255, 255, 255, 0.5);
        }

            #nav a:hover {
                border-bottom-color: transparent;
                color: #18bfef !important;
            }

        #nav strong, #nav b {
            color: #ffffff;
        }

        #nav h1, #nav h2, #nav h3, #nav h4, #nav h5, #nav h6 {
            color: #ffffff;
        }

        #nav blockquote {
            border-left-color: #ffffff;
        }

        #nav code {
            background: rgba(255, 255, 255, 0.075);
            border-color: #ffffff;
        }

        #nav hr {
            border-bottom-color: #ffffff;
        }

        #nav ul.links {
            display: -moz-flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: flex;
            -moz-flex-grow: 1;
            -webkit-flex-grow: 1;
            -ms-flex-grow: 1;
            flex-grow: 1;
            -moz-flex-shrink: 1;
            -webkit-flex-shrink: 1;
            -ms-flex-shrink: 1;
            flex-shrink: 1;
            font-family: "Source Sans Pro", Helvetica, sans-serif;
            font-weight: 900;
            letter-spacing: 0.075em;
            list-style: none;
            margin-bottom: 0;
            padding-left: 0;
            text-transform: uppercase;
        }

            #nav ul.links li {
                display: block;
                padding-left: 0;
            }

                #nav ul.links li a {
                    -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                    -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                    -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
                    display: block;
                    font-size: 0.8rem;
                    outline: none;
                    padding: 0 2rem;
                }

                    #nav ul.links li a:hover {
                        color: inherit !important;
                        background-color: rgba(255, 255, 255, 0.1);
                    }

                #nav ul.links li.active {
                    background-color: #ffffff;
                }

                    #nav ul.links li.active a {
                        color: #1e252d;
                    }

                        #nav ul.links li.active a:hover {
                            color: #18bfef !important;
                        }

        #nav ul.icons {
            -moz-flex-grow: 0;
            -webkit-flex-grow: 0;
            -ms-flex-grow: 0;
            flex-grow: 0;
            -moz-flex-shrink: 0;
            -webkit-flex-shrink: 0;
            -ms-flex-shrink: 0;
            flex-shrink: 0;
            margin-bottom: 0;
        }

        @media screen and (max-width: 980px) {

            #nav {
                display: none;
            }

        }

I've tried defining some rules within the css as #nav ul.links img but this didn't achieve my goals.

What I would like is that the image fit the nav container correctly, be centered within it and have some text next to it (also centered)

I'm pretty sure the way of doing this is obvious, but I haven't found any answers online that fit my problem, they all have variations that make them inapplicable to my issue.

Please tell me if you need more details. The link to the image works 100% so the issue doesn't come from this.

EDIT

Here is the Github link.

Answer 1

#nav ul.links li:first-of-type a{
    display: flex
}
#nav ul.links li:first-of-type a p{
    margin-top: 0;
    margin-left: 5%
}
#logo{
    height: 4em;
    margin-top: 7px;            
}