Feature request: X icon for Twenty-twenty theme social menu

  • Unknown's avatar
    stonenick · Member ·

    The Twenty-twenty theme has a clever social menu option, it automatically assigns icons for known social media networks, including the little bird for Twitter. Along with everyone else, I’m no fan of the X name or icon, but I guess it’s time!

    Can this theme be upgraded so that links to x.com have the X logo?

    Unfortunately I can’t seem to achieve this through CSS editing, as the social icons built into the theme are coded as SVGs, rather than using – say – an icon font.

    To be clear, I’m talking about the social menu (in my case it’s built into the footer and the hamburger menu for mobile), not the share this menu at the end of a post (which does support the X logo).

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    blcshared · Member ·

    Hi there. A client asked me to updated the Twitter logo to X on a site I built using the Twenty Twenty child theme on WordPress.org. I’ve never used .com, but if you are able to edit the functions.php, simply add the following (assuming you have fontawesome loading on the site). If you don’t have fontawesome, find some svg code online and replace it with that. Also, change the menu entry to x.com/whatever for this to work.

    TwentyTwenty_SVG_Icons::$social_icons['x'] = '<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>';
  • Unknown's avatar
    blcshared · Member ·

    Sorry, disregard my comment above. Here is the correct code:

    add_action('after_setup_theme', 'modify_parent_social_icons', 11);
function modify_parent_social_icons() {
    if (class_exists('TwentyTwenty_SVG_Icons')) {
        TwentyTwenty_SVG_Icons::$social_icons['x'] = '<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>';
    }
}
  • Unknown's avatar
    stonenick · Member ·

    Thanks @markaaronrobertsb76377745f that’s a great answer. Unfortunately, I’m using a WordPress.com site, so I can’t edit the functions.php file, I can only edit the CSS.

  • synora10 · Staff ·

    Hi there!

    I’ve placed a feature request for the X logo on the social menu for Twenty Twenty. At this time, I do not have an ETA on when our theme developers will implement this request but feel free to reply to this thread to inquire about updates.

  • Unknown's avatar
    stonenick · Member ·

    Thanks @synora10 much appreciated :-)

  • The topic ‘Feature request: X icon for Twenty-twenty theme social menu’ is closed to new replies.