[WMAParticipant]

Hi,

We want to add a ‘spotify’ social icon to the topbar alongside facebook etc.

Is this possible by editing files/images in the child theme?

Thanks
AC

[Kosher KMember]

Hi AC,

Thanks for writing in,

The easiest way to add another icon in the top bar is to add this code below in Customizer > Custom > Javascript

(function($){ 
	$('.x-social-global').append('<a href="http://your-spotify-here.com" class="spotify" title="Spotify" target="_blank"><i class="x-icon-spotify"></i></a>');
})(jQuery)

make sure to change http://your-spotify-here.com with your spotify url,

Hope that helps,

Have a great day

Cheers

[WMAParticipant]

Excellent, thanks for this – it is working perfectly..however is there an easy way to change the colour (currently appearing white on white)

Thanks again,

AC

[Kosher KMember]

Hi There,

Would you mind providing URL of your site for us to check and provide you with a tailored advise,

Thank you

[WMAParticipant]

This reply has been marked as private.

[ChristopherModerator]

Hi there,
Please add this code under Customize -> Custom -> CSS

i.x-icon-spotify:before {
content: "//f1bc";
}

Hope it helps.

[WMAParticipant]

This displays in the right colour, but only displays the text ‘//f1bc’!

Any ideas?

Thanks
AC

[CousettMember]

There was a slight typo in that instead of //f1bc use "\f1bc"

[WMAParticipant]

Sorry all, the “\f1bc” edit just displays “f1bc” as text in the social icon area.

Apologies for this still going back and forth!

AC

[ZeshanMember]

Hi AC,

We’re sorry for the confusion!

In CSS backslash “\” is considered as an escape sequence and is ignored by the browser. You can either use the following CSS instead under Custom > CSS in the Customizer:

i.x-icon-spotify:before {
   content: "\\f1bc";
}

You can use following in your child theme’s style.css file:

i.x-icon-spotify:before {
   content: "\f1bc";
}

If you haven’t installed a child theme, you can follow our guide here: http://theme.co/x/member/kb/how-to-setup-child-themes/

Hope this helps. 🙂

Thank you.

[Author]

Posts