How to add an icon next to a list item in HTML

DeclanDavies
March 15, 2023
143 views
0 votes
2 Answers

How do I add an icon using Font Awesome, or other means, to a list item on the right, as shown?

I have 4 sections of text to the right, and I would like to convert them into an expandable dropdown. I am trying to add an arrow that points down (<i class="fa-light fa-arrow-down"></i>) from Font Awesome, however, I cannot get the arrow to appear.

.container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30vw;
  background-image: url(pictures/output-onlinepngtools.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  word-break: keep-all;
  border: 2px solid rgb(68, 115, 216);
  padding-left: 20px;
  padding-right: 100px;
}

.container-fluid h1 {
  margin: 0;
  line-height: calc(30vw / 3);
}

.sec2drop li {
  list-style: none;
  border-top: 1px solid rgb(161, 159, 159);
  line-height: 50px;
}

<div class="container-fluid">
  <div class="sec3">
    <ul class="sec2drop">
      <li>
        <i class="fa-light fa-arrow-down"></i> Prepare for a language exam
      </li>
      <li>Hungarian for kids</li>
      <li>Take on a challenge</li>
      <li>Translation services</li>
    </ul>
  </div>
</div>

Answers

- EbrahimFarahmand
- March 15, 2023 at 1:14 pm
- 0 votes
0
Please check your font-awesome css file path and font-faces that linked in css file.
Then copy and paste this code:
```
<div class="container-fluid">
    <div class="sec3">
      <ul class="sec2drop">
        <li>
           Prepare for a language exam <i class="fa fa-caret-down"></i>
        </li>
        <li>Hungarian for kids</li>
        <li>Take on a challenge</li>
        <li>Translation services</li>
      </ul>
    </div>
  </div>
```
Login or Signup to reply.

My first suggestion would be to avoid the use of icon fonts and simply use native HTML elements where they exist, styled appropriately with CSS, as shown below:

ol,
ul,
li {
  /* removing default list-markers from the elements: */
  list-style-type: none;
}

<div class="container-fluid">
  <div class="sec3">
    <ul class="sec2drop">
      <li>
        <details>
          <summary>Prepare for a language exam</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, necessitatibus voluptas nisi sequi perferendis distinctio maiores magnam eos odit assumenda id minima fugiat cum explicabo adipisci vero culpa eligendi hic!</p>
        </details>
      </li>
      <li>
        <details>
          <summary>Hungarian for kids</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, necessitatibus voluptas nisi sequi perferendis distinctio maiores magnam eos odit assumenda id minima fugiat cum explicabo adipisci vero culpa eligendi hic!</p>
        </details>
      </li>
      <li>
        <details>
          <summary>Take on a challenge</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, necessitatibus voluptas nisi sequi perferendis distinctio maiores magnam eos odit assumenda id minima fugiat cum explicabo adipisci vero culpa eligendi hic!</p>
        </details>
      </li>
      <li>
        <details>
          <summary>Translation services</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, necessitatibus voluptas nisi sequi perferendis distinctio maiores magnam eos odit assumenda id minima fugiat cum explicabo adipisci vero culpa eligendi hic!</p>
        </details>
      </li>
    </ul>
  </div>
</div>

JS Fiddle demo.

This can, of course, be further styled:

ol,
ul,
li {
  /* removing default list-styles: */
  list-style-type: none;
}


/* styling all <li> elements which are not the
   :first-child of their parent with a border
   on the starting-edge of their block-axis: */

li:not(:first-child) {
  border-block-start: 1px solid #ccc;
}

details ::marker {
  /* removing default content from the ::marker
     pseudo-elements: */
  content: '';
}

summary {
  /* using the cursor to imply interaction is possible: */
  cursor: pointer;
  /* using flex layout to place a gap between the <summary>
     element's text and its ::before pseudo-element: */
  display: flex;
  gap: 0.25em;
}

details summary::before {
  /* using the downward-pointing triangle as the content: */
  content: '25BE';
  background-color: transparent;
}

details[open] summary::before {
  /* using the upward-pointing triangle as the content
     when the parent <details> is in its open state,
     and therefore has the "open" attribute: */
  content: '25B4';
}

<div class="container-fluid">
  <div class="sec3">
    <ul class="sec2drop">
      <li>
        <details>
          <summary>Prepare for a language exam</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, necessitatibus voluptas nisi sequi perferendis distinctio maiores magnam eos odit assumenda id minima fugiat cum explicabo adipisci vero culpa eligendi hic!</p>
        </details>
      </li>
      <li>
        <details>
          <summary>Hungarian for kids</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, necessitatibus voluptas nisi sequi perferendis distinctio maiores magnam eos odit assumenda id minima fugiat cum explicabo adipisci vero culpa eligendi hic!</p>
        </details>
      </li>
      <li>
        <details>
          <summary>Take on a challenge</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, necessitatibus voluptas nisi sequi perferendis distinctio maiores magnam eos odit assumenda id minima fugiat cum explicabo adipisci vero culpa eligendi hic!</p>
        </details>
      </li>
      <li>
        <details>
          <summary>Translation services</summary>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, necessitatibus voluptas nisi sequi perferendis distinctio maiores magnam eos odit assumenda id minima fugiat cum explicabo adipisci vero culpa eligendi hic!</p>
        </details>
      </li>
    </ul>
  </div>
</div>

JS Fiddle demo.

References: