Timeline icons


#1

Is there a way to use my own custom icons for with the timeline? Here’s an example of the image I would like to use: http://www.leadingwithideas.com/wp-content/uploads/2015/09/Integrity-icon.png

Thanks for your help!


#2

It is possible with some custom CSS, not sure how it will turn out though. You should probably make sure your icons are the same size.
Where exactly is your timeline?


#3

If you can point me in the direction of the image dimensions for the timeline icons, I can definitely make sure mine are fit to match.

As for the timeline, here’s the link: http://www.leadingwithideas.com/?page_id=1034

(Sorry for the week’s delay - got tied up and pulled away from this project. Thanks for your help, as always.)


#4

This would do it:


.timeline-inner .icon .fa {
    display: none;
}

And then this:


.timeline:nth-of-type(1) .icon {
    background: transparent url(http://www.leadingwithideas.com/wp-content/uploads/2015/08//custom_iconplus_rss_skin.png) no-repeat top center !important;
}

Copy this second part as many times as you need while replacing 1 in nth-of-type with 2,3 etc. Also replace the url contained in url(…). I’ve used one of your social icons to test so 50x50 should be fine.


#5

Worked like a charm! Thanks Vlad.