Home Forums Basel support forum Bullet points with font awesome icons

Bullet points with font awesome icons

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #523122

    Tuomo
    Participant

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

    Tuomo
    Participant

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

    Bogdan Donovan
    Keymaster

    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.

    #523294

    Tuomo
    Participant

    Hi there,

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

    Best Regards,
    Tuomo Nurkkala

    #523431

    Bogdan Donovan
    Keymaster

    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

    #523508

    Tuomo
    Participant

    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

    #523572

    Bogdan Donovan
    Keymaster

    You are welcome!

Viewing 7 posts - 1 through 7 (of 7 total)