Estou utilizando o fontawesome para colocar alguns icones em um projeto web que estou fazendo e precisei adicionar uma <ul>
, e nessa lista, vao ficar icones e na frente uma escrita, eu gostaria que essas escritas ficassem todas alinhadas umas com as outras, como posso fazer isso? vou deixar uma amostra:
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<ul style="list-style-type: none;">
<li><i class="far fa-envelope"></i> [email protected]</li>
<li><i class="fas fa-mobile-alt"></i> +99 (99) 99999-9999</li>
<li><i class="fas fa-map-marker-alt"></i> City, State, Country.</li>
</ul>
</body>
</html>
Minha lista por enquanto está igual na imagem acima. Como os icones tem tamanhos diferentes, acabm ocupando mais espaço na horizontal e isso faz com que o inicio dos textos não fique alinhados entre si. Como posso consertar isso?