Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #21877

    I’m trying to add more social icons.

    In sidebar.php i added:

    echo " <li class='rss'>RSS";

    echo "<li class='pinterest'>Pinterest";

    In "Edit CSS" i added:

    .social_bookmarks .pinterest a {

    background: transparent url(../images/shared/icons-pinterest.png) 0 0 no-repeat;


    Then in Images/Shared/ i added

    icons-pinterest.png file (which is a copy of the facebook one simply for testing image, just renamed)

    And the link is there when you mouse over but its not showing the image... help!? Thanks i'll leave it the way it is so you can see my issue. Thanks.



    Ahh. I see the problem. When images are referenced from within a css file , as is the case for twitter and facebook images, the location of those images (if full url is not used) is mapped from the location of the css file on the server in relation to the location of the images. You took code from a css file located in the /css/ folder , switched the name and placed it in Quick CSS which is located inside the theme file located in the main theme folder.

    You also didn’t add the code you pasted above since i see the code you added, and it looks like the code below (/shared/ is missing from url).

    .social_bookmarks .pinterest a{background:transparent url(../images/icons-pinterest.png) 0 0 no-repeat}

    However don’t add the real image into a folder inside the theme, since when you update the theme, it will get overwritten. Instead upload it using Media>Add Image, through WordPress so it saves in the upload folder, and then grab the url to the image (which will be /wp-content/uploads/2013/04/icons-pinterest.png and add that whole url just as i have it to the css:

    #top .social_bookmarks .pinterest a{background:transparent url(/wp-content/uploads/2013/04/icons-pinterest.png) 0 0 no-repeat;}

    Then just paste the above code in place of the old one in Quick CSS and all will be well (just upload the image via Media)


    I tested the code so you should be ok.




    So i uploaded the icon into the Media -> add file


    Link created here ^^

    However when i add

    #top .social_bookmarks .pinterest a{background:transparent url(/wp-content/uploads/2013/04/icons-pinterest.png) 0 0 no-repeat;}

    to “edit css” under appearance, it still doesn’t show the icon.


    The link to the file works fine. (i relise this is a fb image, im just using it for testing)

    Edit css code:

    #top .social_bookmarks .pinterest a {

    background: transparent url(/wp-content/uploads/2013/04/icons-pinterest.png) 0 0 no-repeat;


    edit in sidebar.php


    echo ‘ <li class=”pinterest”>pinterest‘;

    if($facebook = avia_get_option(‘facebook’)) echo “<li class=’facebook’>Facebook“;

    if($twitter = avia_get_option(‘twitter’)) echo “<li class=’twitter’>Twitter“;


    Did you solve the issue? The pinterest icon display fine for me now. If it still doesn’t work for you try to use an absolute url like:

    #top .social_bookmarks .pinterest a{background:transparent url( 0 0 no-repeat;}


    You possibly need to clear your browser cache.

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Social Icons Not Working.’ is closed to new replies.