Navigation
Archive / Custom Social Icons in header & footer only show on homepage…
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • April 18, 2016 at 10:43 pm #889221
    UCSAMatt
    Participant

    Hello,

    I added some css to replace the social icons with some of my own. They show up on the homepage in the header and footer just fine (exactly where I would like them) but on any of the other pages, they have disappeared? I can hover over where they should be and the link is still live and they show the css code upon inspecting them element, but are not visible. Can someone help me get them visible again? Here is my CSS to show the icons I would like, and will add my credentials as well in a reply.

    /*Social Icons */
    .x-icon-facebook-square:before {
    content: url(wp-content/uploads/2016/03/Facebook.png) !important;
    }
    .x-icon-twitter-square:before {
    content: url(wp-content/uploads/2016/03/Twitter.png) !important;
    }
    .x-icon-instagram:before {
    content: url(wp-content/uploads/2016/03/Instagram.png) !important;
    }
    .x-icon-linkedin-square:before {
    content: url(wp-content/uploads/2016/03/Linkedin.png) !important;
    }

    /*Social to Left */
    .x-topbar .x-social-global {
    float:left!important;
    margin-top: 10px;
    position: absolute;
    top: 233px;
    }

    .x-topbar .x-social-global a {
    margin-right: 20px;
    }

    .x-icon-facebook-square:before,.x-icon-twitter-square:before,.x-icon-linkedin-square:before,.x-icon-instagram-square:before{
    font-family: fontawesome;
    }

    April 18, 2016 at 10:43 pm #889222
    UCSAMatt
    Participant
    This reply has been marked as private.
    April 19, 2016 at 6:18 am #889809
    Zeshan
    Member

    Hi there,

    Thanks for writing in!

    This is because you are using relative URL to get the social icons images. Please use absolute URL. So your code would become:

    /*Social Icons */
.x-icon-facebook-square:before {
content: url(http://dev.ucsaintl.com/FFPC/wp-content/uploads/2016/03/Facebook.png) !important;
}
.x-icon-twitter-square:before {
content: url(http://dev.ucsaintl.com/FFPC/wp-content/uploads/2016/03/Twitter.png) !important;
}
.x-icon-instagram:before {
content: url(http://dev.ucsaintl.com/FFPC/wp-content/uploads/2016/03/Instagram.png) !important;
}
.x-icon-linkedin-square:before {
content: url(http://dev.ucsaintl.com/FFPC/wp-content/uploads/2016/03/Linkedin.png) !important;
}

/*Social to Left */
.x-topbar .x-social-global {
    float:left!important;
    margin-top: 10px;
    position: absolute;
    top: 233px;
}

.x-topbar .x-social-global a {
   margin-right: 20px;
}

.x-icon-facebook-square:before,.x-icon-twitter-square:before,.x-icon-linkedin-square:before,.x-icon-instagram-square:before{
  font-family: fontawesome;
}

    Thank you!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-889221 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>