• kturisnav

    (@kturisnav)


    In the main Menu, there are default icons for Facebook and Twitter, and I’d like to add a Discord icon. Is there a way to do this? Happy to edit files in the child theme to do so..

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Jarret

    (@jarretc)

    Hi, the current FontAwesome version being used by the theme doesn’t contain the latest version of FA so it is missing out on Discord. The theme author would need to update the FA version for support for the latest icons.

    That said, if you are really up to it you can implement this yourself by doing the following. Please note, this should be done in a child theme ( https://developer.www.ads-software.com/themes/advanced-topics/child-themes/ ) if you don’t already have one setup.

    First, download the latest version of FA from here:

    https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

    Once you have done that, open up the .zip file. We are looking for the following files:

    /css/brands.css
    /css/brands.min.css
    /webfonts/fa-brands-400.eot
    /webfonts/fa-brands-400.svg
    /webfonts/fa-brands-400.ttf
    /webfonts/fa-brands-400.woff
    /webfonts/fa-brands-400.woff

    Grab these files from the zip and upload them into your child theme’s directory inside of the /font-awesome folder in there. So you should have a setup like this where explore-child is the name of your child theme directory…

    /wp-content/themes/explore-child/font-awesome/css/brands.css
    /wp-content/themes/explore-child/font-awesome/webfonts/fa-brands-400.eot

    Along with the other files mentioned above. Once you have those copied over onto your server, you’ll need to add the following into your child theme’s functions.php file

    function sevenddgaming_fa_brands() {
    	wp_enqueue_style( '7ddgaming-fabrands', get_template_directory_uri() . '/font-awesome/css/brands' . $suffix . '.css', array() );
    }
    add_action( 'wp_head', 'sevenddgaming_fa_brands' );

    What this does is adds the FA brands CSS stylesheet into your theme so that we can load the latest icons using CSS. Then, add your discord link into a custom menu and assign that menu into the Social Menu location in the theme.

    Next, we just add in some CSS to get the Discord icon to display for that menu item

    #menu-social li a[href*="discord.7ddgaming.com"]::before {
    	content: '\f392';
    	color: #517fa4;
    	font-family: "Font Awesome 5 Brands";
    }

    The only thing you may have to change here is the URL in the first line, it has to match the URL that you insert into the Custom Link menu option when creating the menu in the admin dashboard. If everything was setup correctly, you should then see the discord icon showing up in the main menu linking to whatever URL you’d like.

Viewing 1 replies (of 1 total)
  • The topic ‘Menu: Edit/Add Social Media Buttons’ is closed to new replies.