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!!!

Hi! I'm trying to do something similar to this, but I'm trying to have different blocks for each bullet point so that they each have a fill/background color. Kind of like buttons, but without being linked to anything. 

I've gotten this far, but the icon doesn't stay lined up when the window is resized, and the text wrap causes the block to resize too, which is not what I want. 

This is the code I have for one of them (they're all identical): 
 

#block-yui_3_17_2_1_1697415325196_13335 {
ul[data-rte-list] li>*:first-child::before {
    content: " " !important;
background-image: url(https://static1.squarespace.com/static/649c8c8cd7996c5799487d6a/t/652ca02dd6c2f2537f4f2db5/1697423406239/MD-Yellow+on+Black+Star+Bullet-Plain.png);
  display:inline-block;
  background-size:contain;
  background-repeat:no-repeat;
  background-position: center;
  position:absolute;
  height:80px;
  width:80px;
  margin-left: -110px;
  top:12.5px;
  bottom:15px;
  }
}

Any suggestions? Thank you! 

On 10/16/2023 at 10:39 AM, mochhug said:

Hi! I'm trying to do something similar to this, but I'm trying to have different blocks for each bullet point so that they each have a fill/background color. Kind of like buttons, but without being linked to anything. 

I've gotten this far, but the icon doesn't stay lined up when the window is resized, and the text wrap causes the block to resize too, which is not what I want. 

 

This is the code I have for one of them (they're all identical): 
 

#block-yui_3_17_2_1_1697415325196_13335 {
ul[data-rte-list] li>*:first-child::before {
    content: " " !important;
background-image: url(https://static1.squarespace.com/static/649c8c8cd7996c5799487d6a/t/652ca02dd6c2f2537f4f2db5/1697423406239/MD-Yellow+on+Black+Star+Bullet-Plain.png);
  display:inline-block;
  background-size:contain;
  background-repeat:no-repeat;
  background-position: center;
  position:absolute;
  height:80px;
  width:80px;
  margin-left: -110px;
  top:12.5px;
  bottom:15px;
  }
}

Any suggestions? Thank you! 

Can you share link to this page? We can check easier

On 10/17/2023 at 4:03 PM, tuanphan said:

Can you share link to this page? We can check easier

How do I do that if I haven't published yet? 

On 10/26/2023 at 1:31 PM, mochhug said:

How do I do that if I haven't published yet? 

You can follow this guide