Twitter - X Logo Change
Peter Spiegelenburg
Hello,
when will there be a definitive solution for the Twitter <-> X logo change?
In Helix Ultimate it works now with the new X logo without any tricks.
But in SPPB I still have to use this tip I dont think it is difficult, unless you need a different color for hover and/or a second X-logo for a different background. I created a white logo which works, but I also need a black logo for a white background.
And I don't think I am the only one. Please hurry with this.
Regards, Peter
Mehtaz Afsana Borsha
Accepted AnswerHi
Thanks for contacting us and thanks for your opinions. I will inform our team about it so that they can think about it and solve it ASAP.
-Regards.
Paul Frankowski
Accepted AnswerHi Peter, If you would read whole Helix guide tip about "X", there is also tip how to use different color.
With extra class before .fa-twitter::before you can have also white, red, blue icon in SPPB for second icon.
of course it request more thinking, but still possible.
jan95
Accepted Answerhi, any solution for X fa icon ?
Paul Frankowski
Accepted AnswerJan, the only guide is that > https://www.joomshaper.com/documentation/helix-framework/customization-tips
it can be used for Helix3 and Helix Ultimate based templates.
Roger
Accepted AnswerHi Peter,
I had the same issue I believe asking for the new Twitter X logo to be implemented. I succeed in downloading a new .svg X symbol from FontAwesome. I have attached see link...
This then left me with the new logo but the old twitter blue in the Social Share add-in icon.
I have added the following 'custom css' to my Helix Ultimate template to correct the 'X' to black with a 50% lighten on hover. Mine is in RGB format in the CSS code rather than HEX but you can change to what colours you require using the following useful website:
https://hexcolorcodes.org/lighten-color
Anyway my Custome CSS added corrects the Facebook Social Share icon to the new Facebook blue and Twitter to X in black:
.fa-twitter::before { content: url("/images/x-twitter.svg"); width: 14px; display: inline-block; height: 14px; vertical-align: -0.125em;}
.fa-twitter:hover::before { content: url("/images/x-twitter.svg"); width: 14px; display: inline-block; height: 14px; vertical-align: -0.125em;}
.sppb-social-share-style-solid ul li.sppb-social-share-twitter a { background-color: rgb(0, 0, 0); }
.sppb-social-share-style-solid:hover ul li.sppb-social-share-twitter a { background-color: rgb(50, 50, 50); }
.sppb-social-share-style-solid ul li.sppb-social-share-facebook a { background-color: rgb(24, 119, 242); }
.sppb-social-share-style-solid:hover ul li.sppb-social-share-facebook a { background-color: rgb(44, 139, 255); }
The result can be viewed: https://easyupload.io/9szyqp
Hope this helps you Peter :)
Roger