Bullet points with font awesome icons

Hi there,

How can I make bullet points with font awesome icons so they would be on the side of the page like this example?

  <ul class="fa-ul" style="--fa-li-margin: 1em;">
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>List icons can</li>
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be used to</li>
    <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
    <li><span class="fa-li" style="--fa-li-margin: 2em;"><i class="fa-regular fa-square"></i></span>in lists</li>
  </ul>

https://fontawesome.com/docs/web/style/lists
The example is the last one.

I tried many ways to make this work, but I wasn’t able to.

This is my current “bullet points”:

<i class="fa fa-check" aria-hidden="true"></i> <strong>Määräalennus</strong>
<i class="fa fa-check" aria-hidden="true"></i> <strong>Ilmainen toimitus yli 50€ ostoissa Postin automaattiin</strong>
<i class="fa fa-check" aria-hidden="true"></i> <strong>Toimituskulut alk. 4,90€</strong>
<i class="fa fa-check" aria-hidden="true"></i> <strong>Toimitus 1-3 arkipäivässä</strong>
<i class="fa fa-check" aria-hidden="true"></i> <strong>14 päivän palautusoikeus</strong>
<i class="fa fa-check" aria-hidden="true"></i> <strong>Suomalainen verkkokauppa</strong>

Best Regards,
Tuomo Nurkkala

Attachments:

You must be logged in to view attached files.

For example I tried these, but these failed:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-check"></i>Määräalennus</li>
  <li><i class="fa-li fa fa-check"></i>Ilmainen toimitus yli 50€ ostoissa Postin automaattiin</li>
  <li><i class="fa-li fa fa-check"></i>Toimituskulut alk. 4,90€</li>
  <li><i class="fa-li fa fa-check"></i>Toimitus 1-3 arkipäivässä</li>
  <li><i class="fa-li fa fa-check"></i>14 päivän palautusoikeus</li>
  <li><i class="fa-li fa fa-check"></i>Suomalainen verkkokauppa</li>
</ul>

<ul class="fa-ul" style="--fa-li-margin: 1em;">
 	<li><i class="fa fa-check" aria-hidden="true"></i> <strong>Määräalennus</strong></li>
 	<li><i class="fa fa-check" aria-hidden="true"></i> <strong>Ilmainen toimitus yli 50€ ostoissa Postin automaattiin</strong</li>
 	<li><i class="fa fa-check" aria-hidden="true"></i> <strong>Toimituskulut alk. 4,90€</strong></li>
 	<li><i class="fa fa-check" aria-hidden="true"></i> <strong>Toimitus 1-3 arkipäivässä</strong></li>
 	<li><i class="fa fa-check" aria-hidden="true"></i> <strong>14 päivän palautusoikeus</strong></li>
 	<li><i class="fa fa-check" aria-hidden="true"></i> <strong>Suomalainen verkkokauppa</strong></li>
</ul>

  <ul class="fa-ul" style="--fa-li-margin: 1em;">
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Määräalennus</li>
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Ilmainen toimitus yli 50€ ostoissa Postin automaattiin</li>
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Toimituskulut alk. 4,90€</li>
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Toimitus 1-3 arkipäivässä</li>
    <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>14 päivän palautusoikeus</li>
    <li><span class="fa-li" style="--fa-li-margin: 2em;"><i class="fa-solid fa-check-square"></i></span>Suomalainen verkkokauppa</li>
  </ul>

Hello,

Please, provide us with your admin access so we can log in, check this on your side and prepare instructions for you.

Thank you in advance.

Hi there,

You can find these from:
HTML Blocks -> Add to cart button

Best Regards,
Tuomo Nurkkala

Try to use following structure:

<ul class="custom-list">
    <li><i class="fa fa-check"></i><strong>Item 1</strong></li>
    <li><i class="fa fa-check"></i><strong>Item 2</strong></li>
    <li><i class="fa fa-check"></i><strong>Item 3</strong></li>
    <li><i class="fa fa-check"></i><strong>Item 4</strong></li>
 </ul>

With following custom code that need to be placed in Global Custom CSS in Theme settings:

body ul.custom-list {
	padding-left: 20px;
}

.custom-list li:before {
	display: none;
}

.custom-list li {
	position: relative;
}

.custom-list li i {
	position: absolute;
	top: 10px;
	left: -20px;
}

Kind Regards

Hi Bogdan,

Thanks for the help!
I changed this part so then the check marks were great:

.custom-list li i {
	position: absolute;
	top: 10px;
	left: -20px;
}

Best Regards,
Tuomo Nurkkala

You are welcome!

[Author]

Posts