Home › Forums › Basel support forum › Bullet points with font awesome icons
Bullet points with font awesome icons
- This topic has 6 replies, 2 voices, and was last updated 8 months, 3 weeks ago by
Bogdan Donovan.
-
AuthorPosts
-
December 20, 2023 at 1:35 am #523122
TuomoParticipantHi 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 NurkkalaAttachments:
You must be logged in to view attached files.December 20, 2023 at 1:37 am #523126
TuomoParticipantFor 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>
December 20, 2023 at 11:08 am #523191
Bogdan DonovanKeymasterHello,
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.
December 20, 2023 at 1:56 pm #523294
TuomoParticipantHi there,
You can find these from:
HTML Blocks -> Add to cart buttonBest Regards,
Tuomo NurkkalaDecember 20, 2023 at 6:05 pm #523431
Bogdan DonovanKeymasterTry 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
December 21, 2023 at 12:09 am #523508
TuomoParticipantHi 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 NurkkalaDecember 21, 2023 at 10:02 am #523572
Bogdan DonovanKeymasterYou are welcome!
-
AuthorPosts
- You must be logged in to create new topics. Login / Register