Using Check Mark image as a bullet

  • 16 March 2015
  • 5 replies
  • 101 views
Andy_Beohar

We are trying to use the check mark image as a bullet. Adding this as a separate image and aligning it with the associated text has become an issue, especially on mobile devices where the alignment screws up. So we tried the following code to add is as a bullet:

ul{

list-style-image: url("https://app.unbounce.com/assets/d71913ca-146f-466a-a68c-3956de30659d/o-icons-checkmark-19x19.origina...;

}

However, this is not working. Additionally, we only want to apply it to one particular bulleted list, and not to all of them on the page. Is there a way to do this, perhaps by using

?

5 replies

Quinn_Omori
Rank
Userlevel 3
Badge +1

Hi Andy - Meghan responded to the support ticket you submitted, but I’ll summarize here, in case anyone else is looking to do something similar.

There were two small issues. The first was that your CSS needed a bit of a tweak. But that link you had for the image is from inside the Page Builder. When you have the Page Builder open, the assets on the page are tied to your session, so if you link to directly to that link, it won’t show to outside viewers (or after you close the Page Builder). Meghan changed that up to link to the image on a published page:

``` #lp-pom-text-921 li { padding-left: 30px; background-image: url(http://d9hhrg4mnvzow.cloudfront.net/my.sevenatoms.com/hubspot-partner/1q6e5td-o-icons-checkmark-64x64_01001000j00j008008.png); background-repeat: no-repeat; background-position: 0 2px; list-style: none; } </style> ```
The background position and padding might need to be tweaked a bit for different images, but this should give anyone looking to do something similar a great place to start.
lilysmith22

Thanks so much for the post.Really looking forward to read Fantastic blog article.

Lily Smith

SageNext

G

I’ve used images for bullets on several pages, including them in boxes so they will stay with text if I move text around, via moving box. While I understand that as Images, they may need to be moved into proper position in relation to sentence, the problem is that they often don’t move with the box movement. Same problem when, e.g., I add up or down arrows to a button. Even putting the button and arrows inside a box, they arrows, images, seem to not move when I move the box. 

Can you suggest a way to to consistently keep such images inside the box when I reposition it?

This questions really begs, again, for a consistent way to group and ungroup items as  simple menubar command like the undo, redo commands.

Thanks ahead, gerry 

G

Anyone else with a problem with bullets color, size, shape, or alignment will find an answer here: /topics/images-as-bullets-wont-stay-put?utm_source=notificati…

Really works - easy to implement with a bit of patience. Worked for me. Learned it in chats with UnBounce Success Coach.

Saady_Abu_Hatoum

I would like to use the posted code to add an image to a bulleted list. What I don’t understand, though, is how to obtain the URL to the image in my image library.

Can I do that or must I host the image elsewhere?

Reply


Terms & ConditionsCookie settings