FROM CACHE - nl_header
Opgelost

Bulletpoint to icon

iFitt
Toerist
9 0 1

Schermafbeelding 2022-03-13 om 16.18.37.pngSchermafbeelding 2022-03-13 om 16.15.09.png

 

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

 

1 GEACCEPTEERDE OPLOSSING
PublicApps
Shopify Partner
146 5 34

Geslaagd.

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>

 

Screenshot 2022-03-14 at 14.33.18.png

Public Apps | Theme customization & App development
 - Was my reply useful? Like it to let me know!
 - Did I answer your question? Please mark as Accepted Solution.
 - Need more help? Contact us.

Bekijk de oplossing in de community in het oorspronkelijke bericht

6 ANTWOORDEN 6

PublicApps
Shopify Partner
146 5 34

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:

Screenshot 2022-03-13 at 20.43.33.png

Public Apps | Theme customization & App development
 - Was my reply useful? Like it to let me know!
 - Did I answer your question? Please mark as Accepted Solution.
 - Need more help? Contact us.

iFitt
Toerist
9 0 1

iFitt_0-1647257918412.png

 

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
Shopify Partner
146 5 34

Using the code above with the following adjustment:

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




Public Apps | Theme customization & App development
 - Was my reply useful? Like it to let me know!
 - Did I answer your question? Please mark as Accepted Solution.
 - Need more help? Contact us.

iFitt
Toerist
9 0 1

iFitt_1-1647259621021.png

 

iFitt_0-1647259592503.png

 

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

 

PublicApps
Shopify Partner
146 5 34

Geslaagd.

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>

 

Screenshot 2022-03-14 at 14.33.18.png

Public Apps | Theme customization & App development
 - Was my reply useful? Like it to let me know!
 - Did I answer your question? Please mark as Accepted Solution.
 - Need more help? Contact us.

iFitt
Toerist
9 0 1

Thanks! Awesome