Topic: Change social icons on head « SeaTheme

This topic has 16 replies, 3 voices, and was last updated 10 years, 11 months ago by SeaTheme.

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

Author

Posts
February 13, 2015 at 4:39 pm #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

WordPress Customization Service from $49 Only! Save your expensive time!

February 14, 2015 at 3:07 am #6254
SeaTheme
Keymaster

Purchased
Expired
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
WordPress Customization Service from $49 Only! Save your expensive time!

February 16, 2015 at 10:31 pm #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

WordPress Customization Service from $49 Only! Save your expensive time!

February 17, 2015 at 2:28 am #6312

SeaTheme
Keymaster

Purchased
Expired

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

Best

WordPress Customization Service from $49 Only! Save your expensive time!

February 17, 2015 at 10:47 am #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%;
}

WordPress Customization Service from $49 Only! Save your expensive time!

February 17, 2015 at 11:59 am #6326

SeaTheme
Keymaster

Purchased
Expired

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

WordPress Customization Service from $49 Only! Save your expensive time!

February 17, 2015 at 1:48 pm #6334

Filipemus
Participant

This reply has been marked as private.

WordPress Customization Service from $49 Only! Save your expensive time!

February 17, 2015 at 2:00 pm #6335

Filipemus
Participant

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

WordPress Customization Service from $49 Only! Save your expensive time!

February 18, 2015 at 1:23 am #6343
SeaTheme
Keymaster

Purchased
Expired
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;
}
```
WordPress Customization Service from $49 Only! Save your expensive time!

February 18, 2015 at 1:44 pm #6355

Filipemus
Participant

Great thanks that worked!

WordPress Customization Service from $49 Only! Save your expensive time!

February 18, 2015 at 3:21 pm #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?

WordPress Customization Service from $49 Only! Save your expensive time!

February 19, 2015 at 2:25 am #6362

SeaTheme
Keymaster

Purchased
Expired

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

WordPress Customization Service from $49 Only! Save your expensive time!

February 19, 2015 at 2:04 pm #6370

Filipemus
Participant

yes that is working, thanks for all your help!

WordPress Customization Service from $49 Only! Save your expensive time!

July 15, 2015 at 9:22 pm #7922

expandtalk
Participant

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

WordPress Customization Service from $49 Only! Save your expensive time!

July 16, 2015 at 1:02 am #7928

SeaTheme
Keymaster

Purchased
Expired

HI expandtalk,

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

Cheers!
Bwsm – uiueux.com

WordPress Customization Service from $49 Only! Save your expensive time!

July 16, 2015 at 5:34 am #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>
```
WordPress Customization Service from $49 Only! Save your expensive time!

July 16, 2015 at 6:23 am #7943

SeaTheme
Keymaster

Purchased
Expired

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

WordPress Customization Service from $49 Only! Save your expensive time!
Author

Posts

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

You must be logged in to reply to this topic.