Align icons and text in a list

Asked

Viewed 613 times

-1

I’m using the fontawesome to put some icons in a web project I’m doing and I needed to add a <ul>, And on that list, there’s going to be icones and in front of a writing, I’d like those writings to be all aligned with each other, how can I do that? I’ll leave a sample:

<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

My list for now is the same in the image above. As the icons have different sizes, they occupy more space horizontally and this makes the beginning of the texts not align with each other. How can I fix this?

html css twitter-bootstrap list font-awesome

2 answers

1

For this you should leave all icons with the same size, from a look at this class:

.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>

  • Thanks for the answer, but when I put this class of yours, it got a little out of line due to display: block and the float: left, when I left just the width worked perfectly. :)

  • @Samuk if you solved the problem with the help of the colleague mark his answer as accepted, just click the below the arrow beside his answer. So you help the community and leave your question with an answer already accepted

0

You can define a width fixed to icons, as in this example:

.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>

I also aligned them vertically with text-align: center;, besides using FA5 in this example and not 4.7.

Browser other questions tagged html css twitter-bootstrap list font-awesome

You are not signed in. Login or sign up in order to post.