Add Social Media Links To Footer Credit Bar

Hi

This is the footer I’m trying to copy

I would like the copyright to be on the left and then use social media menu used on the header contact form to be in the bottom right corner?
The WordPress customiser menu says HTMl code is allowed? Could it be as simple as embedding the header contact social medi menu in there?

Many thanks

Will

Hello Will,

Try to use this HTML in footer credits input field:

<div style='float: left;'>
    <p style='margin-bottom: 0'>© All rights reserved</p>
</div>

<div style='float: right;'>
    <a href='//facebook.com' class='fa fa-facebook' style='padding: 10px;'></a>
    <a href='//twitter.com' class='fa fa-twitter' style='padding: 10px;'></a>
    <a href='//instagram.com' class='fa fa-instagram' style='padding: 10px;'></a>
    <a href='//youtube.com' class='fa fa-youtube' style='padding: 10px;'></a>
</div>

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

P. S.
You’ll have to replace those placeholder links with your own links.

Hi Roman

Many thanks for your reply. It works perfectly. The problem I have come across is that I’m trying to use the Font Awesome icon ‘Discord’ (https://fontawesome.com/icons/discord?style=brands) and it doesn’t appear. I also have the icon in the header contact bar, but that too doesn’t work.

Thank you again for help.

Kind regards

Will

Will, discord icon appeared in Font Awesome 5.0.0, but Sydney Pro still includes version 4.7.0. That’s why you can’t use that icon yet. As a workaround, you can try to use image for now, you can get it here:

Kind Regards, Roman.

Hi Roman

Is there any way of updating Font Awesome to version 5? If not, when are the developers planning to?

Many thanks

Will

Hello Will,

Is there any way of updating Font Awesome to version 5?

I don’t think that there is an easy way to do it, unfortunately.

If not, when are the developers planning to?

I can not provide the exact time now.

Please let me know if you need more help.

Kind Regards, Roman.

Hi Roman

Well I’ve managed to load Font Awesome 5 using the following code in the functions.php file

add_action( 'wp_enqueue_scripts', 'custom_load_font_awesome' );
/**
 * Enqueue Font Awesome.
 */
function custom_load_font_awesome() {

    wp_enqueue_style( 'font-awesome-free', '//use.fontawesome.com/releases/v5.5.0/css/all.css' );

}

and the footer icons are working using class=‘fab fa-discord’. However, the contact header bar at the top of the page still doesn’t display the Discord icon. Of course I have added the following extra code into a child theme

.social-links a[href*="discord.gg"]:hover {
	color: #7289da;
}

The only difference betweeen the two is that the header contact bar relies on the Font Awesome unicode codes and the code for the footber uses HTML. Is there anyway to use the HTML class in the header contact bar like I’ve done with the footer?

Many thanks

Will

Hello Will,

It looks like your website is in construction mode, can you please disable it and leave here a note?

Also you can create a staging site for troubleshooting purposes, here is an extensive tutorial:

Kind Regards, Roman.

Hi Roman

I have now disables the maintenance mode for the site so you should be able to view it. I do have a WAMP server that runs the latest the same version of WordPress which I sometimes use to test on a barbones setup.

Look forward to hearing from you.

Many thanks

Will

Hello Will,

I’ve just checked your website once again but it looks like you have enabled maintenance mode back. Is this issue still actual?

Kind Regards, Roman.

Hi Roman

My friend may have accidentally enabled it, but I’ve now let him know and it should viewable now.

Kind regards

Will

Hello Will,

Try to add this CSS code as a workaround:

#menu-item-116 a::before {
    font-family: "Font Awesome 5 Brands" !important;
}

Kind Regards, Roman.

Hi Roman

That code works perfectly. Thank you very much for your help.

I have made some tweaks based off your code and set a higher CSS slector and also included the remaining Font Awesome 5 fonts. Hopefully other users using other Athemes themes may be able to use this to see similar results.

/*Enable Font Awesome 5 In Social Menu*/
#menu-social-media a::before {
	font-family: "Font Awesome 5 Brands", "Font Awesome 5 Regular", "Font Awesome 5 Solid" !important;
}

Kind regards

Will

Great! You are welcome Will :slight_smile:

And thank you for sharing that!

Kind Regards, Roman.