Twitter is now known as 𝕏

[93ben]

Is it possible to change Twitter to 𝕏? Font Awesome now has a icon for it https://fontawesome.com/icons/x-twitter?f=brands&s=solid

Thanks

[cabot]

It's not that simple because the style uses the Font Awesome 4 icon font built into phpBB. :/

I may suggest that you install the Footer Icons extension.

Or, if modifying the style is not a problem for you, then we can trick a little and display an svg instead of the font.

In social_links.html, find:

{% for socialLink in socialLinks if socialLink.href %}
    {% set socialItem = '<li class="socialinks-list-item damaio-footer-' ~ socialLink.title|lower ~ '"><a href="' ~ socialLink.href ~ '" title="' ~ socialLink.customtitle|default(socialLink.title) ~ '"><i class="icon icon-xl fa-' ~ socialLink.title|lower ~ '"></i></a></li>' %}
    {% set footerListItems = footerListItems|merge([socialItem]) %}
{% endfor %}

Replace with:

{% for socialLink in socialLinks if socialLink.href %}
    {% if socialLink.href == definition.DAMAIO_TWITTER %}
        {% set socialItem = '<li class="socialinks-list-item damaio-footer-' ~ socialLink.title|lower ~ '"><a href="' ~ socialLink.href ~ '" title="' ~ socialLink.customtitle|default(socialLink.title) ~ '"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><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></a></li>' %}
    {% else %}
        {% set socialItem = '<li class="socialinks-list-item damaio-footer-' ~ socialLink.title|lower ~ '"><a href="' ~ socialLink.href ~ '" title="' ~ socialLink.customtitle|default(socialLink.title) ~ '"><i class="icon icon-xl fa-' ~ socialLink.title|lower ~ '"></i></a></li>' %}
    {% endif %}
    {% set footerListItems = footerListItems|merge([socialItem]) %}
{% endfor %}

Then, in base.css, add:

.damaio-footer-twitter svg {
    width: 1em;
    height: 1em;
    font-size: 2.15em;
    padding: 0 5px;
    fill: #fff;
    opacity: 0.75;
    vertical-align: sub;
    transition: opacity 0.25s;
}

.damaio-footer-twitter svg:hover {
    opacity: 1;
}