Add custom/image bullets on post and page titles

[diegocerezo]

I need to add an icon styled like a bullet on all the post and page titles of my site, how do I go about modifying the CSS (or add it on jectpack css option) so that it is applied to across all the site?

Thanks a lot for you feedback and help!

http://casamorrison.com/boomgym

[jodzeee]

Is this what you mean:

Add Icon Before or After Entry Title

[diegocerezo]

Almost! correct me if i´m wrong but the site you refer helps you and the "Dashicons" i need a custom icon. But pretty close to what i need:

I want to add and icon before every title on both pages and posts and i need that icon to be this:

Just the kettlebell without what reads "boom kettlebel gym established 2006"

It´s going to be black, the previous image is just to show and provide reference.

[jodzeee]

How about adding this to your CSS (replace the image URL with your own icon image)

.entry-header {
background: url(http://placehold.it/32x32) no-repeat;
padding-left: 40px;
}

[diegocerezo]

THANK YOU SO MUCH! it worked beatifully!!! so simple yet so effective!

Now i have a problem, how can I have a different bullet (size wise) for the widget area, I´m using the genesis featured posts and it cuts the icon in half, here follow this link and you will be able to see what I mean, also the little logo (the bullet) looks cool IMO but a bit pixelated, any advice regarding quality setings? I have the logo drawn on path.

http://casamorrison.com/boomgym/category/workouts/

Again thank you so much for your time and help!

[jodzeee]

Target the header in the widget area and add some CSS.

I was able to get it to work with this:

.widget-wrap .entry-header {
height: 40px;
}

or

.widget-wrap .entry-header {
overflow: auto;
}

As for the quality ... try SVG instead of PNG.

[diegocerezo]

THANKS A LOT!

It works perfectly!

Cheers

[jodzeee]

You're welcome. Please mark this post as resolved. Cheers!

[Author]

Posts