Social Buttons: Icon replacement or addition
Xtreme “Plus” gives you the possibility to define a number of standard Social Buttons, linking to the appropriate site.
This Tutorial will show you how to replace any of their Icons by your own Icon image, or add new unsupported Social Buttons.
Xtreme uses Genericons for its Social Buttons Icons.
(Read more about these in This User Guide Article)
If you wish to replace the Genericon by an actual image icon, you will need to inspect your page to see what is the iconname that you want to replace.
Then you can use the rule below in the Global Custom CSS rule box to replace it by your own icon image.
Replace iconname by the appropriate one
Replace ImageUrl in the rule below by the actual Url of the icon image file you uploaded in your Media Library
Replace 32px by whatever Font size you have on the other icons
You can adjust the vertical positioning by replacing center by center XXpx like center -5px
.genericon-iconname::before { content:""; display:block; width:32px; height:32px; background:url(ImageUrl) center no-repeat; background-size:contain; }
Note:
This can also be useful to add a Social Button that is not in the list of supported one.
Just use one that you don’t need to link to the appropriate site, and then replace its Icon by the one you need.