Bulletpoint to icon

[iFitt]

Hi, I would like to transform the bulletpoint in a shopify description to an icon. I already have the code of the icon, which is 'ad ad-plus-circle, which is an icon from my adorn theme. 

So, how do I change the bulletpoints to this icon on my website iFitt.nl? Right now I added the icon, but just with html and it looks as the first picture. This isnt with bulletpoint.

You see that the text , when starting a new line of 1 sentence, the text goed underneath the icon. 

I want it like on the second picture, so the text doesnt go underneath the icon, but stays the same vertical line as a whole. So how do I change this bulletpoint to the icon 'ad ad-plus-circle?

Thanks

[PublicApps]

For bullet points one would use the unordered list HTML element (<ul>). This element has bullets by default, but can have custom images instead of bullets. If you want to use a character from a custom set, you could do something like this:

<style>
    ul.demo {
        list-style-type: none;
    }
    ul li {
        display: flex;
        gap: 7px;
        align-items: baseline;
        margin-bottom: 20px;
    }
    ul.demo li::before {
        color: #0eba00;
        font-size: 16px;
        font-family: adorn-icons;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        content: "\e9d7";
        position: relative;
        top: 2px;
    }
</style>
<ul class="demo">
    <li>Nam pretium turpis et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, posuere ut, mauris.</li>
    <li>Quscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris.</li>
    <li>Et et arcu. Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Integer ante arcu, accumsan a, consectetuer eget.</li>
</ul>

To get the result in the red square:

[iFitt]

Thanks. How can I also add this minus icon in grey color #9c9c9c as on the picture? In the picture it's not completed, i tried it another way but its not working like that, so it definitetly has to be in a <li> list. How can I add a minus beneath this list in grey color?

Thanks!

An example url: https://ifitt.nl/products/evocardio-renegade-air-rower-pro-arp100

[PublicApps]

Using the code above with the following adjustment:

ul.demo li::before {
  ...
  color: #9c9c9c;
  content: "\e9c8";
  ...
}

[iFitt]

Yes I have done it, it doesnt work. It shows only grey minus icons, not as I mentioned before.

[PublicApps · Accepted solution]

Yes, it was an illustration of how to display the grey icon.

If you're not familiar with HTML and CSS, try copy pasting this:

<style>
    ul.pros-and-cons { list-style-type: none; }
    ul.pros-and-cons li {
        display: flex;
        gap: 7px;
        align-items: baseline;
        margin-bottom: 20px; }
    ul.pros-and-cons li::before {
        font-size: 16px;
        font-family: adorn-icons;
        speak: none;
        font-style: normal;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        position: relative;
        top: 2px; }
    ul.pros-and-cons li.pro::before { color: #0eba00; content: "\e9d7"; }
    ul.pros-and-cons li.con::before { color: #9c9c9c; content: "\e9c8"; }
</style>
<ul class="pros-and-cons">
    <li class="pro">Ergonomische handgrepen en verstelbare voetsteunen</li>
    <li class="pro">8 weerstandniveau's en 8 uitdagende programma's</li>
    <li class="pro">Groot LCD-scherm met 7 diverse weergave variabelen</li>
    <li class="pro">Inklapbaar frame met transportwielen voor een eenvoudige opberging</li>
    <li class="con">Niet compatibel met fitnessapps</li>
    <li class="con">Geen borstband inbegrepen</li>
</ul>

[iFitt]

Thanks! Awesome