Alignment of the icon relative to the text

* { padding: 0; margin: 0; font-family: Verdana, sans-serif; } ul { background-color: orange; display: flex; justify-content: center; } ul li:hover { background-color: gray; transition: .3s; } ul li { list-style-type: none; padding: 15px; } ul li a { text-decoration: none; color: black; } i.fa { padding-right: 8px; font-size: 20px; } i.fa-angle-down { padding-left: 5px; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" /> <div class="header_topline"> <nav class="nav"> <ul> <li><a href="#"><i class="fa fa-home" aria-hidden="true"></i>Главная</a></li> <li><a href="#"><i class="fa fa-shopping-basket" aria-hidden="true"></i>Услуги<i class="fa fa-angle-down"></i></a></li> <li><a href="#"><i class="fa fa-newspaper-o" aria-hidden="true"></i>Новости</a></li> <li><a href="#"><i class="fa fa-phone" aria-hidden="true"></i>Контакты</a></li> </ul> </nav> </div>