XenForo Change Twitter Share Logo To X Logo

wikislo · Feb 10, 2025

Change Twitter Share Logo To X Logo - Change Twitter share logo to X logo for XenForo 2.2.x
This one is pretty simple and while it will likely be updated in a future release, there may be others who want to go ahead and update it now.
The first thing you will want to do is add the following code to your extra.less template.

CSS:

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

Next open the template share_page_macros.

Find...

HTML:

<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 with the following...

HTML:

<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 want you can also replace it <span>{{ phrase('twitter') }}</span>with something like <span>X (Twitter)</span>if you want.

XenForo Change Twitter Share Logo To X Logo

wikislo