Alignment of list items when using variable sized font awesome icons-CodePudding

I am trying to list all the contact details of a company. I am using different icons from font awesome. Each icon does not have the same width. How to I properly left allight all the text? I managed to algin the text flowing over multiple lines using flex layout. The display area is limited to 230px

body {
  font-family: Arial, Helvetica, sans-serif;
}


/*
        https://fontawesome.com/v5/search
        */

ul.ContactUs {
  list-style-type: none;
  display: flex;
  /* Use flex layout for the list */
  flex-direction: column;
  /* Stack the list items vertically */
  align-items: left;
  /* Align the list items vertically at the center */
}

ul.ContactUs li {
  display: flex;
  padding: 4px 0;
  color: black;
}

ul.ContactUs li:before {
  font-family: 'FontAwesome';
  content: '\f067';
  margin: 0 11px 0 -25px;
}

ul.ContactUs li.address:before {
  content: '\f60e';
}

ul.ContactUs li.phone:before {
  content: '\f879';
}

ul.ContactUs li.mobile:before {
  content: '\f3cd';
}

ul.ContactUs li.email:before {
  content: '\f0e0';
  margin-right: 0.5em;
  /* Some space between the icon and the text */
}

<!--Fontawsome  -->
<script src="https://kit.fontawesome.com/d2ee99dc46.js" crossorigin="anonymous"></script>
  <div style="width: 230px; border: 1px solid black;"><h4>Contact Us</h4><ul ><li >63 Street name,
  Azaadville,
  Johannesburg,
  South Africa,
  1754</li><li >011 768 3415</li><li >082 554 0050</li><li >Hello(at) Companyname.co.za</li></ul></div>

CodePudding user response：

I edited a little you example, I added gap: 5px; to the li to controls the space between flex items, I also removed the margin-right for email li so the email text will be aligned with the previews texts, Then like mok_ku said I added flex: 0 0 20px; to ul.ContactUs li:before so the width is fixed to 20px:

body {
  font-family: Arial, Helvetica, sans-serif;
}

/*
  https://fontawesome.com/v5/search
*/

ul.ContactUs {
  list-style-type: none;
  display: flex;
  /* Use flex layout for the list */
  flex-direction: column;
  /* Stack the list items vertically */
  align-items: left;
  /* Align the list items vertically at the center */
}

ul.ContactUs li {
  display: flex;
  padding: 4px 0;
  color: black;
  gap: 5px;
}

ul.ContactUs li:before {
  font-family: 'FontAwesome';
  content: '\f067';
  margin: 0 11px 0 -25px;
  flex: 0 0 20px;
}

ul.ContactUs li.address:before {
  content: '\f60e';
}

ul.ContactUs li.phone:before {
  content: '\f879';
}

ul.ContactUs li.mobile:before {
  content: '\f3cd';
}

ul.ContactUs li.email:before {
  content: '\f0e0';
  /* Some space between the icon and the text */
}

<!--Fontawsome  -->
<script src="https://kit.fontawesome.com/d2ee99dc46.js" crossorigin="anonymous"></script>
<div style="width: 230px; border: 1px solid black;">
  <h4>Contact Us</h4>
  <ul >
    <li >
      63 Street name,
      Azaadville,
      Johannesburg,
      South Africa,
      1754
    </li>
    <li >011 768 3415</li>
    <li >082 554 0050</li>
    <li >Hello(at) Companyname.co.za</li>
  </ul>
</div>

CodePudding user response：

I would place the icons directly in the HTML file instead of working with :before pseudo-elements in CSS.

I don't think the ul should have a display of flex here. Instead I would make each of the list items a flex box and give the div that contains the icons a certain width, for example 15%, and give the other 85% to the text.

body {
  font-family: Arial, Helvetica, sans-serif;
}

.contact-info {
  font-style: normal;
  width: 230px;
  border: 1px solid black;
}
.contact-info h4 {
  text-align: center;
}

.contact-info__list {
  list-style-type: none;
  margin: 0 0 0 20px;
  padding: 0;
}

.contact-info__list__item {
  display: flex;
  align-items: center;
}

.contact-info__list__item__icon {
  width: 15%;
}

.contact-info__list__item__text {
  width: 85%;
}

    <script
      src="https://kit.fontawesome.com/d2ee99dc46.js"
      crossorigin="anonymous"
    ></script>

<address >
      <h4>Contact Us</h4>
      <ul >
        <li >
          <div >
            <i ></i>
          </div>
          <p >
            63 Street name, Azaadville, Johannesburg, South Africa, 1754
          </p>
        </li>
        <li >
          <div >
            <i ></i>
          </div>
          <p >011 768 3415</p>
        </li>
        <li >
          <div >
            <i ></i>
          </div>
          <p >082 554 0050</p>
        </li>
        <li >
          <div >
            <i ></i>
          </div>
          <p >
            Hello(at) Companyname.co.za
          </p>
        </li>
      </ul>
    </address>