Remove the glyphicons

  • Resolved lozadaOmr

    (@lozadaomr)


    11 years ago

    I want to replace the social icons that uses glyphicons, and make it into images (actual logo) of the social-sites instead of using glyphicons.

    Where can I edit it? I have already created a child theme.

Viewing 2 replies - 1 through 2 (of 2 total)
  • Theme Author presscustomizr

    (@nikeo)

    Hi, the icons are displayed with a pseudo class :before.
    Example for Facebook :

    HTML :

    <a class="social-icon icon-facebook" href="https://myfacebookprofile" title="Follow me on facebook" target="_blank"></a>

    CSS :

    .social-block a:before {
font-family: 'genericons';
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}

.icon-facebook:before {
content: "\f204";
}

    You can just override this for each single icon with your own picture background in the :before pseudo class.
    Hope this will help you and share your url once you’ve done it!

    Thread Starter lozadaOmr

    (@lozadaomr)

    Okay so it me awhile to figure out that I wasn’t suppose to use background-image in the CSS.

    Anyway this the code I am using which solves my problem.

    .icon-facebook:before {
	content: url(https://image/url/image.png) !important;
}
.icon-feed:before {
	content: url(https://image/url/image.png) !important;
}
.icon-instagram:before {
	content: url(https://image/url/image.png) !important;
}

    Thank you @nikeo for the replying to my question.

    The website can be found here

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Remove the glyphicons’ is closed to new replies.

Tags