How do you make little graphics?

Hi, I’m pretty sure this is going to be a newbie question…

But I’m wondering how graphic designers are able to make blue stars and green checks next to text?

Example: http://brainjuicer.me/

I have a WordPress site, and would like to insert green checks next to text instead of bullet points, but whenever I insert an image, you can then click on it afterwards which is amateurish in my opinion. How do people do it like the website design example above? Is it difficult or can anyone do it?

You just create the image (obviously) and then you set it as a background-image, which makes it imposible for users to click (I assume you were doing <img> in the HTML before?) :slight_smile:

Yes, I think so. Thanks for clearing that up.

You’re welcome :). Glad I could help.

Wait no!

You need to set the list-style-image if you want to make an image as a bullet.

Like so:

HTML


<ul>
<li class="bullet">Sitepoint</li>
<li class="bullet">Google</li>
<li class="bullet">Yahoo!</li>
</ul>

CSS


li.bullet
{
 list-style-image:url('bullet.jpg');
}

See?

The drawback to that is that different browsers place that image on different spots vertically. So you won’t have consistant results cross browser.

That’s why I suggested doing the background-image approach :).