new x-twitter logo in Sydney theme

Hi @gnomi,

Thanks for the report. I’ll add it to our radar for future update.

Meanwhile, you can add the X logo with SVG background.

.social-profile a[href*="twitter.com"] i svg {
    opacity: 0;
}

.social-profile a[href*="twitter.com"] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='https://www.w3.org/2000/svg' height='1em' viewBox='0 0 512 512'%3E%3Cpath d='M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48' fill='%23FFFFFF' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

Add it to your site’s Additional CSS.

If the code doesn’t change anything, you may need to adjust the CSS selector.

Thank you for the answer, but I can not bring it up. It is still the “bird”

In the browser it is:
<li id="menu-item-272" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-272"><a target="_blank"><span class="screen-reader-text">twitter</span></a></li>

I tried:
.social-menu-widget a[href*="twitter.com"]::before{content:'\e61b'}
instead of
.social-menu-widget a[href*="twitter.com"]::before{content:'\f099'}
before, but it is not showing the “x”??

Any other hint?

I updated to the newest Sydney Theme and there is still the old twitter “bird” logo. Is there really no update so far?

Hi @gnomi,

I’ve been adding X icon update to the roadmap of upcoming version of Sydney theme.

Meanwhile, you may want to display X icon manually with this simple CSS code:

.social-profile a[href*="twitter.com"] {
    background-image: url('data:image/svg+xml,<svg xmlns="https://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><style>svg{fill:%23feffff}</style><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>');
    background-repeat: no-repeat;
}

.social-profile a[href*="twitter.com"] .sydney-svg-icon {
    opacity: 0;
}

To apply it to your site, add it to Dashboard > Customize > Additional CSS.

Hi @kharisblank ,

Thank you for the hint, but when adding this, I am receiving this error message while trying to save the CSS: Markup not allowed in CSS.

I have a German WP and I used it in:
Dashboard > Design > Customizer >> Zus?tzliches CSS(Additional CSS)

• This reply was modified 1 year, 2 months ago by gnomi.

Hi @kharisblank,

according the release notes Version 2.29 should contain the update of the twitter to X logo. I use the “normal” free Version 2.31 now but always get the bird logo, when using the individual link in the footer menue https://twitter.com/home.

Is ther ANY proven description, how to come to the new X-logo in using Sydney for the social menue?

Hi @gnomi,

Thank you for getting back.

The new icon may not load instantly until you re-enter your Twitter profile address.

Please visit Customizer, remove your Twitter profile address, save, re-enter the address, then save. Do not forget to flush cache if you have caching system enabled.

Thank you @kharisblank, but I wasn’t successful!
<span style=”text-decoration: underline;”>customizer-menues-social menue</span>

• Twitter deleted-saved-published

<span style=”text-decoration: underline;”>customizer-menues-social menue</span>
— added individual link
– link: https://twitter.com/home
– name: X / Twitter

Result: Icon —> the bird

What should I do different?

• This reply was modified 11 months, 1 week ago by gnomi.