Change bullet points to icons

Hi,

This is my web site:

I want the first 4 bullet points to have this icon:
uxwing.com/wp-content/themes/uxwing/download/communication-chat-call/correct-icon.svg

And the last bullet point, I want to have this icon:
uxwing.com/wp-content/themes/uxwing/download/crime-security-military-law/verify-phone-number-icon.svg

Could someone please help me with this?

Hi @Robmaster

let try to add custom css below:

#shopify-section-template--19273389670629__rich_text_bLfQ8P ul li {
  list-style-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20122.88%20122.87%22%20style%3D%22enable-background%3Anew%200%200%20122.88%20122.87%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B.st0%7Bfill%3A%2339B54A%3B%7D.st1%7Bfill%3A%233C3C3C%3B%7D%5D%5D%3E%3C%2Fstyle%3E%3Cg%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M32.82%2C51.34l14.99-0.2l1.12%2C0.29c3.03%2C1.74%2C5.88%2C3.74%2C8.54%2C5.99c1.92%2C1.63%2C3.76%2C3.4%2C5.5%2C5.32%20c5.38-8.65%2C11.11-16.6%2C17.16-23.9c6.63-8%2C13.66-15.27%2C21.05-21.9l1.46-0.56h16.36l-3.3%2C3.66c-10.13%2C11.26-19.33%2C22.9-27.64%2C34.9%20C79.74%2C66.97%2C72.31%2C79.37%2C65.7%2C92.13l-2.06%2C3.97l-1.89-4.04c-3.49-7.48-7.66-14.35-12.64-20.49c-4.98-6.14-10.77-11.59-17.52-16.22%20L32.82%2C51.34L32.82%2C51.34L32.82%2C51.34z%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M61.44%2C0c9.53%2C0%2C18.55%2C2.17%2C26.61%2C6.04c-3.3%2C2.61-6.36%2C5.11-9.21%2C7.53c-5.43-1.97-11.28-3.05-17.39-3.05%20c-14.06%2C0-26.79%2C5.7-36%2C14.92c-9.21%2C9.22-14.92%2C21.94-14.92%2C36c0%2C14.06%2C5.7%2C26.78%2C14.92%2C36s21.94%2C14.92%2C36%2C14.92%20c14.06%2C0%2C26.79-5.7%2C36-14.92c9.22-9.22%2C14.91-21.94%2C14.91-36c0-3.34-0.32-6.62-0.94-9.78c2.64-3.44%2C5.35-6.88%2C8.11-10.28%20c2.17%2C6.28%2C3.35%2C13.04%2C3.35%2C20.06c0%2C16.96-6.88%2C32.33-17.99%2C43.44c-11.12%2C11.12-26.48%2C18-43.44%2C18c-16.96%2C0-32.32-6.88-43.44-18%20C6.88%2C93.76%2C0%2C78.4%2C0%2C61.44C0%2C44.47%2C6.88%2C29.11%2C17.99%2C18C29.11%2C6.88%2C44.47%2C0%2C61.44%2C0L61.44%2C0L61.44%2C0z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
#shopify-section-template--19273389670629__rich_text_bLfQ8P ul li:last-child {
  list-style-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20shape-rendering%3D%22geometricPrecision%22%20text-rendering%3D%22geometricPrecision%22%20image-rendering%3D%22optimizeQuality%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20viewBox%3D%220%200%20397%20511.911%22%3E%3Cpath%20fill%3D%22%231A1A1A%22%20d%3D%22M62.087%200h168.92c17.125%200%2032.753%206.988%2043.891%2018.212%2011.293%2011.306%2018.184%2026.85%2018.184%2043.89v36.586c-2.371-.11-4.755-.173-7.154-.173-4.28%200-8.515.188-12.704.538V61.507H19.771v364.164h253.453v-26.146c4.189.35%208.424.537%2012.704.537a154.3%20154.3%200%20007.154-.172v49.934c0%2017.138-6.975%2032.766-18.184%2043.891-11.322%2011.321-26.85%2018.196-43.891%2018.196H62.087c-17.138%200-32.765-6.972-43.89-18.196C6.89%20482.421%200%20466.878%200%20449.824V62.018c0-17.14%206.975-32.767%2018.197-43.905C29.49%206.819%2044.949%200%2062.087%200zm84.376%20445.096c14.046%200%2025.523%2011.308%2025.523%2025.523%200%2014.061-11.306%2025.538-25.523%2025.538-14.046%200-25.538-11.307-25.538-25.538%200-14.031%2011.309-25.523%2025.538-25.523z%22%2F%3E%3Cpath%20fill%3D%22%2300A912%22%20d%3D%22M285.928%20138.216c61.364%200%20111.072%2049.739%20111.072%20111.072%200%2061.364-49.74%20111.072-111.072%20111.072-61.364%200-111.073-49.74-111.073-111.072%200-61.366%2049.74-111.072%20111.073-111.072zm-35.903%2094.85l19.688%2018.593%2049.388-50.017c3.857-3.916%206.274-7.055%2011.025-2.161l15.426%2015.803c5.068%205.01%204.809%207.945.032%2012.608l-67.062%2066.023c-10.075%209.875-8.32%2010.48-18.538.347l-35.921-35.722c-2.132-2.304-1.902-4.634.428-6.937l17.907-18.569c2.713-2.856%204.874-2.607%207.627.032z%22%2F%3E%3C%2Fsvg%3E');
}

#shopify-section-template--19273389670629__rich_text_bLfQ8P ul li::marker{
  font-size: 3.6em;
  line-height: .1;
}

The result:

1 Like

I can get it to work :confused:

so does it not work? Do you need me support more?

Yes please.

Let rollback your change to yesterday.

Then go to Admin → Sales Channels → Online Stores → Themes → click Edit code your current theme

Add my code to file assets/base.css

I did paste the text into base.css, but it does nothing happens :sad_but_relieved_face:

Because yesterday your list structure using HTML ul > li tags but currently you are using p tag.

please change as yesterday

I cant figure it out. Could you do the coding once more, from how my page in today? :innocent:

we can’t do with the current code because it don’t have a tag to we can style for it

if you’re using Rich Text app block of theme, let update as this:

Ok, I changed it back to how it was, and put in the code. The same happens as last time. I only get bigger bullet points, not the icons.

please wait to let me check

Hi @Robmaster

Can you replace with this code:

#shopify-section-template--19273389670629__rich_text_bLfQ8P ul li {
  list-style-image: url('data:image/svg+xml,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20122.88%20122.87%22%20style%3D%22enable-background%3Anew%200%200%20122.88%20122.87%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%3C!%5BCDATA%5B.st0%7Bfill%3A%2339B54A%3B%7D.st1%7Bfill%3A%233C3C3C%3B%7D%5D%5D%3E%3C%2Fstyle%3E%3Cg%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M32.82%2C51.34l14.99-0.2l1.12%2C0.29c3.03%2C1.74%2C5.88%2C3.74%2C8.54%2C5.99c1.92%2C1.63%2C3.76%2C3.4%2C5.5%2C5.32%20c5.38-8.65%2C11.11-16.6%2C17.16-23.9c6.63-8%2C13.66-15.27%2C21.05-21.9l1.46-0.56h16.36l-3.3%2C3.66c-10.13%2C11.26-19.33%2C22.9-27.64%2C34.9%20C79.74%2C66.97%2C72.31%2C79.37%2C65.7%2C92.13l-2.06%2C3.97l-1.89-4.04c-3.49-7.48-7.66-14.35-12.64-20.49c-4.98-6.14-10.77-11.59-17.52-16.22%20L32.82%2C51.34L32.82%2C51.34L32.82%2C51.34z%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M61.44%2C0c9.53%2C0%2C18.55%2C2.17%2C26.61%2C6.04c-3.3%2C2.61-6.36%2C5.11-9.21%2C7.53c-5.43-1.97-11.28-3.05-17.39-3.05%20c-14.06%2C0-26.79%2C5.7-36%2C14.92c-9.21%2C9.22-14.92%2C21.94-14.92%2C36c0%2C14.06%2C5.7%2C26.78%2C14.92%2C36s21.94%2C14.92%2C36%2C14.92%20c14.06%2C0%2C26.79-5.7%2C36-14.92c9.22-9.22%2C14.91-21.94%2C14.91-36c0-3.34-0.32-6.62-0.94-9.78c2.64-3.44%2C5.35-6.88%2C8.11-10.28%20c2.17%2C6.28%2C3.35%2C13.04%2C3.35%2C20.06c0%2C16.96-6.88%2C32.33-17.99%2C43.44c-11.12%2C11.12-26.48%2C18-43.44%2C18c-16.96%2C0-32.32-6.88-43.44-18%20C6.88%2C93.76%2C0%2C78.4%2C0%2C61.44C0%2C44.47%2C6.88%2C29.11%2C17.99%2C18C29.11%2C6.88%2C44.47%2C0%2C61.44%2C0L61.44%2C0L61.44%2C0z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}
#shopify-section-template--19273389670629__rich_text_bLfQ8P ul li:last-child {
  list-style-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20shape-rendering%3D%22geometricPrecision%22%20text-rendering%3D%22geometricPrecision%22%20image-rendering%3D%22optimizeQuality%22%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20viewBox%3D%220%200%20397%20511.911%22%3E%3Cpath%20fill%3D%22%231A1A1A%22%20d%3D%22M62.087%200h168.92c17.125%200%2032.753%206.988%2043.891%2018.212%2011.293%2011.306%2018.184%2026.85%2018.184%2043.89v36.586c-2.371-.11-4.755-.173-7.154-.173-4.28%200-8.515.188-12.704.538V61.507H19.771v364.164h253.453v-26.146c4.189.35%208.424.537%2012.704.537a154.3%20154.3%200%20007.154-.172v49.934c0%2017.138-6.975%2032.766-18.184%2043.891-11.322%2011.321-26.85%2018.196-43.891%2018.196H62.087c-17.138%200-32.765-6.972-43.89-18.196C6.89%20482.421%200%20466.878%200%20449.824V62.018c0-17.14%206.975-32.767%2018.197-43.905C29.49%206.819%2044.949%200%2062.087%200zm84.376%20445.096c14.046%200%2025.523%2011.308%2025.523%2025.523%200%2014.061-11.306%2025.538-25.523%2025.538-14.046%200-25.538-11.307-25.538-25.538%200-14.031%2011.309-25.523%2025.538-25.523z%22%2F%3E%3Cpath%20fill%3D%22%2300A912%22%20d%3D%22M285.928%20138.216c61.364%200%20111.072%2049.739%20111.072%20111.072%200%2061.364-49.74%20111.072-111.072%20111.072-61.364%200-111.073-49.74-111.073-111.072%200-61.366%2049.74-111.072%20111.073-111.072zm-35.903%2094.85l19.688%2018.593%2049.388-50.017c3.857-3.916%206.274-7.055%2011.025-2.161l15.426%2015.803c5.068%205.01%204.809%207.945.032%2012.608l-67.062%2066.023c-10.075%209.875-8.32%2010.48-18.538.347l-35.921-35.722c-2.132-2.304-1.902-4.634.428-6.937l17.907-18.569c2.713-2.856%204.874-2.607%207.627.032z%22%2F%3E%3C%2Fsvg%3E');
}
#shopify-section-template--19273389670629__rich_text_bLfQ8P ul li::marker{
  font-size: 3.6em;
  line-height: .1;
}

@Robmaster

I’m not sure why but the code I sent here seem reformat so if you copy it couldn’t work.

so please copy the content of my attachment file to your base.css file

Ah, perfect ,it worked! :grinning_face: Is it possible to make the icons a bit bigger?

You can increase font-size as you want. Currently it’s 3.6em

I am trying to change the size, but nothing happens. Do you have any advice?

yes because you’re adding incorrect syntax:

let use like this:

#shopify-section-template--19273389670629__rich_text_bLfQ8P ul li::marker{
  font-size: 10em;
  line-height: .1;
}