Home Forums Bee WordPress Theme Change social icons on head

This topic contains 16 replies, has 3 voices, and was last updated by  BWSM 1 year, 8 months ago.

Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • #6251

    Filipemus
    Participant

    Hi,

    Is it possible to change a social icon on the head?

    For example, I would like to substitute the icon for vimeo for one I created.

    Thank you,
    Filipe

    #6254

    BWSM
    Keymaster

    Hi,

    You could use png file to replace the icon:
    – remove the old font icon by the custom css:#header_wrap .s-vimeo:before {content: "";}
    – create png file for icon, suggest size is 48×48
    – add the png as background image for icon by the custom css:

     #header_wrap .social_active>i.s-vimeo 
    {
    background-image:url(xxx.png);background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 50% 50%;
    } 

    Best

    #6305

    Filipemus
    Participant

    Thanks for the reply.

    What about substituting the icon with text? It would be like another menu item, but on the right side.

    If I use the custom CSS #header_wrap .s-vimeo:before {content: “XXX”;} the text XXX will be displayed in a different font and size.

    Regards,
    Filipe

    #6312

    BWSM
    Keymaster

    Hi Filipe, the social icon can not be set text.

    Best

    #6322

    Filipemus
    Participant

    Ok. It worked removing the old icon by inserting this #header_wrap .s-vimeo:before {content: “”;}

    But nothing happens when we add this part and insert a url between the brackets as displayed below.
    #header_wrap .social_active>i.s-vimeo
    {
    background-image:url(http://www.myapplicationclinic.com/wp-content/uploads/2015/02/plus.png);background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 50% 50%;
    }

    #6326

    BWSM
    Keymaster

    please leave your wp-admin(url/user/pass) as private reply

    #6334

    Filipemus
    Participant
    This reply has been marked as private.
    #6335

    Filipemus
    Participant

    and we are using the icon-s-odnoklassniki, since this icon we won’t use for anything else

    #6343

    BWSM
    Keymaster

    code update to:

    #header_wrap .icon-s-odnoklassniki:before {content: "";}
    #header_wrap .social_active i.icon-s-odnoklassniki {
    background-image: url(http://www.myapplicationclinic.com/wp-content/uploads/2015/02/plus.png);
    background-repeat: no-repeat;
    background-size: 24px 24px;
    background-position: 50% 50%;
    width: 40px;
    height: 40px;
    }
    • This reply was modified 2 years, 1 month ago by  BWSM.
    • This reply was modified 2 years, 1 month ago by  BWSM.
    #6355

    Filipemus
    Participant

    Great thanks that worked!

    #6357

    Filipemus
    Participant

    is it possible to make the icon wider? when we change width to for instance 100px and insert a wider image, it still shows the same width. Does it have something to do with the background size and background position specified?

    #6362

    BWSM
    Keymaster

    Please try to change the #socialicons>a span {width:40px;} and width:40px in above css

    #6370

    Filipemus
    Participant

    yes that is working, thanks for all your help!

    #7922

    expandtalk
    Participant

    Is it possible to add a nofollow on the social icons at the head?

    #7928

    BWSM
    Keymaster

    HI expandtalk,

    What’s nofollow you talked? Better paste a screenshot.

    Cheers!
    Bwsm – uiueux.com
    Twitter Facebook

    #7937

    expandtalk
    Participant
    <h3 class="mobile-header-tit">Social Network</h3>
    <ul><li><a title="Visit Facebook page" href="http://www.facebook.com/expandtalk" class="social_active">Facebook</a></li> <li><a title="Visit Twitter page" href="http://twitter.com/expandtalk" class="social_active">Twitter</a></li> <li><a title="Visit Google Plus page" href="https://plus.google.com/+ExpandtalkSe2" class="social_active">Google+</a></li> <li><a title="Visit Linkedin page" href="https://se.linkedin.com/in/larssondaniel" class="social_active">Linkedin</a></li> </ul>
    • This reply was modified 1 year, 8 months ago by  expandtalk.
    • This reply was modified 1 year, 8 months ago by  expandtalk.
    • This reply was modified 1 year, 8 months ago by  expandtalk.
    #7943

    BWSM
    Keymaster

    Did you mean that add a new social media at top of page?

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

You must be logged in to reply to this topic.