-1

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>

inserir a descrição da imagem aqui

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?

2 Respostas 2

1

Para isso você deve deixar todos os ícones com o mesmo tamanho, de uma olhada nessa classe:

.icon{
    display: block;
    width: 15px;
    float: left;
}
<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="icon far fa-envelope"></i> [email protected]</li>
      <li><i class="icon fas fa-mobile-alt"></i> +99 (99) 99999-9999</li>
      <li><i class="icon fas fa-map-marker-alt"></i> City, State, Country.</li>
    </ul>
  </body>
</html>

2
  • Obrigado pela resposta, mas quando coloquei essa classe sua, ficou um pouco desalinhado devido ao display: block e o float: left, quando eu deixei apenas o width funcionou perfeitamente. :)
    – SaMuK
    Commented 24/01/2020 às 17:17
  • @SaMuK se vc resolvei o problema com a ajuda do colega marque a resposta dele como aceita, é só clicar no ✔ abaixo das setinha ao lado da resposta dele. Assim vc ajuda a comunidade e deixa a sua pergunta com uma resposta já aceita
    – hugocsl
    Commented 27/01/2020 às 13:02
0

Podes definir um width fixo para os ícones, como neste exemplo:

.fa-spacing {
  width: 1.25em;
  text-align: center;
}
<html>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />

<body>
  <ul style="list-style-type: none;">
    <li><i class="fa-spacing far fa-envelope"></i> [email protected]</li>
    <li><i class="fa-spacing fas fa-mobile-alt"></i> +99 (99) 99999-9999</li>
    <li><i class="fa-spacing fas fa-map-marker-alt"></i> City, State, Country.</li>
  </ul>
</body>

</html>

Também alinhei eles verticalmente com text-align: center;, além de utilizar o FA5 neste exemplo e não o 4.7.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .