Intégration d'images dans le menu

Bonjour.
Je n'arrive pas à ce que mes icônes soit à la gauche de mes liens du menu, j'aimerai que les icônes soit à gauche et mes liens plus vers la droite.
voici l'image de ce que ça donne pour le moment.

html :

<div id="nav">
            <ul>
                <li><a><div class="burger"></div></a>
                    <ul>
                        <li><img src="img/acceuil.png" id="icone"><a href="#" id="first"> Acceuil</a></li>
                        <li><img src="img/user.png" id="icone"><a href="#"> Utilisateur</a></li>
                        <li><img src="img/calendar.png" id="icone"><a href="#"> Calendrier</a></li>
                        <li><img src="img/replay.png" id="icone"><a href="#"> Replays</a></li>
                        <li><img src="img/settings.png" id="icone"><a href="#"x> Réglages</a></li>
                    </ul>
                </li>
                <li id="home"><a href="#"><img src="img/logo.png" id="logo"></a></li>
            </ul>
        </div>

css :

/* Menu de Navigation*/
#nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
    text-align:center;
 }
#nav li {
    float:left;
    margin:auto;
    padding: auto;
    padding:0;
    background-color: #234098 ;
    height: 50px;
 }
#nav li a {
    display:inline;
    width:120px;
    color:white;
    text-decoration:none;
    padding:5px;
    text-align: justify;
 }
#nav li a:hover {
    color:#FFD700;
 }
 #nav ul li ul {
    display:none;
 }
#nav ul li:hover ul {
    display:block;
 }
#nav li:hover ul li {
    float:none;
 }
 #nav ul li:hover ul {
    display:block;
 }
#nav li:hover ul li {
    float:none;
 }
#nav {
    position: relative;
    height:50px;
    width: 100%;
    background-color:#234098;
 }
#first {
    position: absolute;
    top: 54px;
}
#nav #home {
    position: absolute;
    top: 0px;
    right: 0px;
    display:block;
}
#nav #home a {
    margin-top: 5px;
}

Je n'arrive pas à trouver une solution, quelqu'un de plus expérimenté aurais une idée?

Merci d'avance
Axel.