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

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.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

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>

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:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

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

<!-- end snippet -->

JS Fiddle demo.

This can, of course, be further styled:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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: 'BE';
  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: 'B4';
}

<!-- language: lang-html -->

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

<!-- end snippet -->

JS Fiddle demo.

References:

• CSS:
  • Attribute-selectors.
  • :first-child.
  • ::marker.
  • :not().
  • Pseudo-elements.
• HTML:
  • <details>.
  • <summary>.

Bibliography:

• Unicode Characters: 02500 to 025FF.