Tutorials Change Twitter Share Logo To X Logo

[XFModz]

This one is pretty simple and, although I'm sure it'll be updated in a future release, I figured there might be others who would like to go ahead and get this updated now. Also, I'm not sure if it's been shared before but, if it has, I couldn't find it so here goes...

First thing you'll want to do is add the following code to your extra.less template.

.shareButtons-button.shareButtons-button--twitter:hover {
    background-color: #000000;
}
.shareButtons--iconic .shareButtons-button>svg {
    vertical-align: middle;
}

Now that you've got that done, you'll want to open up the share_page_macros template.

Find this...

<xf:if is="$xf.options.tweet.enabled">
    <a class="shareButtons-button shareButtons-button--brand shareButtons-button--twitter" data-href="https://twitter.com/intent/tweet?url={url}&amp;text={title}{{ $xf.options.tweet.via ? '&amp;via=' . $xf.options.tweet.via : '' }}{{ $xf.options.tweet.related ? '&amp;related=' . $xf.options.tweet.related : '' }}">
        <i aria-hidden="true"></i>
        <span>{{ phrase('twitter') }}</span>
    </a>
</xf:if>

Replace it with this...

<xf:if is="$xf.options.tweet.enabled">
    <a class="shareButtons-button shareButtons-button--brand shareButtons-button--twitter" data-href="https://twitter.com/intent/tweet?url={url}&amp;text={title}{{ $xf.options.tweet.via ? '&amp;via=' . $xf.options.tweet.via : '' }}{{ $xf.options.tweet.related ? '&amp;related=' . $xf.options.tweet.related : '' }}">
        <svg xmlns="http://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. --><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>
        <span>{{ phrase('twitter') }}</span>
    </a>
</xf:if>

If you'd like you could also replace <span>{{ phrase('twitter') }}</span> with something like <span>X (Twitter)</span> if you wanted to but I just left mine as-is. As I said before, I assume it'll be updated in an upcoming release anyways.