Help adding Youtube icon to traction theme

  • Author
  • #1753490


    I’m looking to add the YouTube icon to the social media icon bar in the traction theme. It isn’t one of the options provided with the theme. However, I do have custom CSS upgrade and was wondering if anyone would be able to help me put the icon there so I can link it to my YouTube channel.

    The blog I need help with is


    Hi there, I’ve looked at the HTML and the CSS associated with the social icons at upper right, and don’t readily see a way to do this, but if you want to experiment a little, go to Appearance > Theme Options and put a link to your Youtube page into the flickr section and let me see if I can find a way to change that into a Youtube icon.

    One thing to know though, if you hover over one of the icons for a bit, a tooltip box will come up that says the name of the social network, so if I can do this, the Youtube will say “flickr”. There isn’t anyway to hide the tooltip that I’ve been able to find.



    The images for the social media icons on this theme are in the theme’s HTML, so you can’t edit it directly.
    Fortunately, I found a CSS workaround.

    The first bit of CSS is going to make your link (the “a” tag) be the size of the other icons and have the image you want (be sure to change the background-image url). The second bit simply hides the old Flickr image (and it should get rid of the tooltip too).
    Simply replace the # sign with which social media icon it is in line (1, 2, 3, etc.)
    Even the cool hover effect will still work!

    .subscribe li:nth-of-type(#) a {
        width: 20px;
        height: 20px;
        display: block;
        background-image: url("link-to-your-youtube-icon-here");
    .subscribe li:nth-of-type(#) a img {
    /* THIS CODE SHOULD WORK IN Firefox 3.5+, Opera 9.5+, Chrome 2+, Safari 3.1+, IE9+ */

The topic ‘Help adding Youtube icon to traction theme’ is closed to new replies.