CODEWITHSUNDEEP
htmlcss
Zoltan King
Zoltan King

Reputation: 2262

How to properly use FontAwesome icons instead of the default list bullets?

I wrote the code below and it seems to work fine although I inspired from the Internet and I don't really know if I did it correctly. I'm not sure if that <span> element in HTML is required. Also, what would be the correct way to use ARIA on these items?

Also, it doesn't wrap correctly with the icon set:

enter image description here

:root {
  font-size: 1em;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  margin: 2em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul > li {
  font-size: 1.1rem;
  line-height: 1.8;
  padding: 5.5px 0;
}

.icon {
  margin-right: 12px;
}

.fas {
  color: #510b76;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/eca7e491a7.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="list-style-fa.css">
  <title>List Style FontAwesome</title>
</head>
<body>
  <div class="container">
    <ul>
      <li>
        <span class="icon">
          <i class="fas fa-check"></i>
        </span>
        First Item
      </li>
      <li>
        <span class="icon">
          <i class="fas fa-check"></i>
        </span>
        Second Item
      </li>
      <li>
        <span class="icon">
          <i class="fas fa-plus"></i>
        </span>
        Third Item
      </li>
      <li>
        <span class="icon">
          <i class="fas fa-check"></i>
        </span>
        Fourth Item
      </li>
    </ul>
  </div>
</body>
</html>

UPDATED: I followed the instructions in the comment below and it worked fine but if the icons are of different nature the text doesn't align exactly.

enter image description here

Upvotes: 1

Views: 73

Answers (2)

Temani Afif
Temani Afif

Reputation: 272909

make it a table structure:

:root {
  font-size: 1em;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  margin: 2em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display:table; /* here */
}

ul > li {
  font-size: 1.1rem;
  line-height: 1.8;
  padding: 5.5px 0;
  display:table-row; /* here */
}

.icon {
  padding-right: 12px;
  display:table-cell; /* here */
}

.fas {
  color: #510b76;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/eca7e491a7.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="list-style-fa.css">
  <title>List Style FontAwesome</title>
</head>
<body>
  <div class="container">
    <ul>
      <li>
        <span class="icon">
          <i class="fas fa-check"></i>
        </span>
        First Item
      </li>
      <li>
        <span class="icon">
          <i class="fas fa-check"></i>
        </span>
        Second Item Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      
      </li>
      <li>
        <span class="icon">
          <i class="fas fa-plus"></i>
        </span>
        Third Item
      </li>
      <li>
        <span class="icon">
          <i class="fas fa-check"></i>
        </span>
        Fourth Item
      </li>
    </ul>
  </div>
</body>
</html>

Upvotes: 1

Lalji Tadhani
Lalji Tadhani

Reputation: 14159

Add display:flex; on li

ul > li {
  font-size: 1.1rem;
  line-height: 1.8;
  padding: 5.5px 0;
  display:flex;
}


:root {
  font-size: 1em;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  margin: 2em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

ul > li {
  font-size: 1.1rem;
  line-height: 1.8;
  padding: 5.5px 0;
  display:flex;
}

.icon {
  margin-right: 12px;
}

.fas {
  color: #510b76;
}
<!DOCTYPE html>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/eca7e491a7.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="list-style-fa.css">
  <title>List Style FontAwesome</title>
</head>
<body>
  <div class="container">
    <ul>
      <li>
        <span class="icon">
          <i class="fas fa-check"></i>
        </span>
        First Item Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </li>
      <li>
        <span class="icon">
          <i class="fas fa-check"></i>
        </span>
        Second Item
      </li>
      <li>
        <span class="icon">
          <i class="fas fa-plus"></i>
        </span>
        Third Item
      </li>
      <li>
        <span class="icon">
          <i class="fas fa-check"></i>
        </span>
        Fourth Item
      </li>
    </ul>
  </div>
</body>
</html>

Upvotes: 2

Related Questions