Tips for inserting an icon alongside a list item in HTML

Question

Tips for inserting an icon alongside a list item in HTML

https://i.sstatic.net/sTWRu.png

Can you help me with adding an icon to a list item using Font Awesome or any other method? I want the icon to appear on the right side of the text. I have four sections of text that I want to convert into expandable dropdowns. I tried adding an arrow pointing down (

<i class="fa-light fa-arrow-down"></i>

) from Font Awesome, but it doesn't seem to be showing up.

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

html css font-awesome

Answer 1

Answer №1

Please make sure to double-check the file path for your font-awesome css and the font-faces linked in the css file. Once you have done that, simply copy and paste the following code:

<div class="container-fluid">
    <div class="sec3">
      <ul class="sec2drop">
        <li>
           Get ready for a language exam <i class="fa fa-caret-down"></i>
        </li>
        <li>Hungarian lessons for children</li>
        <li>Embrace a new challenge</li>
        <li>Professional translation services</li>
      </ul>
    </div>
  </div>

Answer 2

Please make sure to double-check the file path for your font-awesome css and the font-faces linked in the css file. Once you have done that, simply copy and paste the following code:

<div class="container-fluid">
    <div class="sec3">
      <ul class="sec2drop">
        <li>
           Get ready for a language exam <i class="fa fa-caret-down"></i>
        </li>
        <li>Hungarian lessons for children</li>
        <li>Embrace a new challenge</li>
        <li>Professional translation services</li>
      </ul>
    </div>
  </div>

Answer 3

Answer №2

To enhance accessibility and improve the structure of your code, it is recommended to refrain from using icon fonts and instead utilize native HTML elements styled with CSS for a cleaner approach:

ol,
ul,
li {
  /* Eliminating default list markers: */
  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>

View JS Fiddle demo.

You can further customize the styling as needed:

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


/* Adding borders to non-first-child <li> elements
   on their block-axis start edge: */

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

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

summary {
  /* Using cursor for interactive hint: */
  cursor: pointer;
  /* Flex layout for gap between <summary> text and ::before pseudo-element: */
  display: flex;
  gap: 0.25em;
}

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

details[open] summary::before {
  /* Switching to upward-pointing triangle as content
     when parent <details> is open: */
  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>

Check out JS Fiddle demo.

For more detailed information, refer to the following resources:

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

Additional Reading:

Unicode Characters: 02500 to 025FF.

Answer 4

To enhance accessibility and improve the structure of your code, it is recommended to refrain from using icon fonts and instead utilize native HTML elements styled with CSS for a cleaner approach:

ol,
ul,
li {
  /* Eliminating default list markers: */
  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>

View JS Fiddle demo.

You can further customize the styling as needed:

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


/* Adding borders to non-first-child <li> elements
   on their block-axis start edge: */

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

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

summary {
  /* Using cursor for interactive hint: */
  cursor: pointer;
  /* Flex layout for gap between <summary> text and ::before pseudo-element: */
  display: flex;
  gap: 0.25em;
}

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

details[open] summary::before {
  /* Switching to upward-pointing triangle as content
     when parent <details> is open: */
  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>

Check out JS Fiddle demo.

For more detailed information, refer to the following resources:

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

Additional Reading:

Unicode Characters: 02500 to 025FF.

Tips for inserting an icon alongside a list item in HTML

Answer №1

Answer №2

Similar questions

"Ensure only one checkbox is selected at a time by unchecking the previous

Tips on merging HTML node lists from various `getElement`s

What is the best way to pass a CSS root constant to a separate CSS file?

Having trouble with refreshing the div content when using jQuery's $.ajax() function

Connecting CSS styles and images to my EJS templates on a distant Express server using Node.js (Ubuntu 18.04)

Tips for maintaining the alignment of four buttons in a single row as the size of the screen changes

Arranging components in a horizontal layout on Jquery mobile

Unlimited scrolling gallery with multiple rows

Why do my tablet media queries take precedence over mobile view media queries?

Transform your standard HTML buttons into a collective of radio buttons

Utilize a specific component to enclose particular words within a contenteditable div in an Angular project

Bootstrap 4 and Angular 7 application experiencing issues with toggle button functionality in the navigation bar

A guide to connecting keyboard events to div elements within a React application

How can I show hidden column names in the Sencha Touch 2 date picker component with CSS?

Guide to activating form elements using a JQuery function

Eliminating data from selection options on a HTML menu list

Angular: merging object values into a single string by looping over them

Prevent using href for opening the browser when clicked

Tips for setting up the image as the header background in HTML5 and CSS3

CSS Navigation Bar Fails to Function Properly on Mobile Devices