Image icons as bullet points

Site URL: https://rachel-balm.squarespace.com/work-with-me

Hi, Im wondering if someone can help with some css make an image icon as the bullet point like the image attached.

The website is : https://rachel-balm.squarespace.com/work-with-me Password: Rachel

And the image + url is : 

Also, Im needing different icons for different sections so cant use css for the entire site.

24 minutes ago, Elle_H said:

Site URL: https://rachel-balm.squarespace.com/work-with-me

Hi, Im wondering if someone can help with some css make an image icon as the bullet point like the image attached.

The website is : https://rachel-balm.squarespace.com/work-with-me Password: Rachel

And the image + url is : 

Also, Im needing different icons for different sections so cant use css for the entire site.

I saw you already got it solved right?

4 minutes ago, bangank36 said:

I saw you already got it solved right?

Hi, No, Ive done it as an image in Canva but its obviously not mobile responsive as an image and the text is too small on mobile device

17 minutes ago, Elle_H said:

Hi, No, Ive done it as an image in Canva but its obviously not mobile responsive as an image and the text is too small on mobile device

LOL, sorry I not check it carefully, could you add a block with unordered list so I can suggest the code to modify it

19 minutes ago, bangank36 said:

LOL, sorry I not check it carefully, could you add a block with unordered list so I can suggest the code to modify it

Thank you, ive removed the image and put it in as an unordered list.

3 minutes ago, bangank36 said:

Since the styling is block-specific, you got to know the id of each block

1. Install Chrome extension Chrome Web Store - Extensions (google.com)

2. Click on extension icon to get the block id and replace it into this snippet (replace the text: _block_id with id)

_block_id ul li>*:first-child::before {
  content: '' !important;
}
_block_id ul li {
  position: relative;
  list-style-type:none;
}
_block_id ul li:before {
	content: "";
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
  background-repeat: no-repeat;
  background-size: cover;
	position: absolute;
  width: 40px;
  height: 20px;
	left: -40px;
  top: 2px;
}

3. On the specific case

#block-yui_3_17_2_1_1607577106512_8287 ul li>*:first-child::before {
  content: '' !important;
}
#block-yui_3_17_2_1_1607577106512_8287 ul li {
  position: relative;
  list-style-type:none;
}
#block-yui_3_17_2_1_1607577106512_8287 ul li:before {
	content: "";
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
  background-repeat: no-repeat;
  background-size: cover;
	position: absolute;
  width: 40px;
  height: 20px;
	left: -40px;
  top: 2px;
}

 

Amazing! this worked!  Thank you so much! Saved me hours of searching.

Hi!  How would I target only one bullet point with this?  I'm trying to add different images for each bullet.  Hoping someone can assist!

On 3/18/2023 at 6:47 PM, DevonHarris said:

Hi!  How would I target only one bullet point with this?  I'm trying to add different images for each bullet.  Hoping someone can assist!

Change this line

#block-yui_3_17_2_1_1607577106512_8287 ul li:before {
	content: "";
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
  background-repeat: no-repeat;
  background-size: cover;
	position: absolute;
  width: 40px;
  height: 20px;
	left: -40px;
  top: 2px;
}

to this

#block-yui_3_17_2_1_1607577106512_8287 ul li:before {
	content: "";
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
  background-repeat: no-repeat;
  background-size: cover;
	position: absolute;
  width: 40px;
  height: 20px;
	left: -40px;
  top: 2px;
}
#block-yui_3_17_2_1_1607577106512_8287 ul li:nth-child(1):before {
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
}
#block-yui_3_17_2_1_1607577106512_8287 ul li:nth-child(2):before {
 background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
}
#block-yui_3_17_2_1_1607577106512_8287 ul li:nth-child(3):before {
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
}

you can see nth-child(1), (2), (3)

1 hour ago, tuanphan said:

Change this line

#block-yui_3_17_2_1_1607577106512_8287 ul li:before {
	content: "";
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
  background-repeat: no-repeat;
  background-size: cover;
	position: absolute;
  width: 40px;
  height: 20px;
	left: -40px;
  top: 2px;
}

to this

#block-yui_3_17_2_1_1607577106512_8287 ul li:before {
	content: "";
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
  background-repeat: no-repeat;
  background-size: cover;
	position: absolute;
  width: 40px;
  height: 20px;
	left: -40px;
  top: 2px;
}
#block-yui_3_17_2_1_1607577106512_8287 ul li:nth-child(1):before {
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
}
#block-yui_3_17_2_1_1607577106512_8287 ul li:nth-child(2):before {
 background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
}
#block-yui_3_17_2_1_1607577106512_8287 ul li:nth-child(3):before {
  background-image: url(https://static1.squarespace.com/static/5fa48e9e7c970759a6f2f59f/t/5fbc348263a1d011e44a0047/1606169730628/Gold+plant+leaves.png);
}

you can see nth-child(1), (2), (3)

@tuanphan this is amazing, THANK YOU SO MUCH!  I have been racking my brain all week trying to figure out how to correctly insert the :nth-item tag with no luck.  You are awesome!!!