Add an envelope/e-mail social icon

Travelify
1

Hello - I would like to add an envelope/e-mail social icon to the header on the travel blog (mikemcewan.ca) I am creating. Using the search function, I found css code for other themes, but it does not seem to work for travelify.

Can anyone help me with this? And once I add it using code, how do I specify the e-mail address?

Thank you in advance!

2

Hi @mikemcewan,

Thank you for your another question.

You can achieve this by adding the class “fa-envelope” to the email custom menu item to the social icons menu that you have created and then add the following CSS code in the Custom CSS option of the latest version of Travelify theme on the below path.

Admin Area -> Appearance -> Customize -> Travelify Other Options

.social-icons li.fa-envelope:before{
    display: none;
}
.social-icons li.fa-envelope a i:before {
    content: "\f0e0";
}

You should use the menu URL as following.

mailto:[email protected]?Subject=Hello%20again

Best Regards,
Movin

3

Thank you @Movin,

I follow the second part but am unsure how to:

You can achieve this by adding the class “fa-envelope” to the email custom menu item to the social icons menu that you have created...

The current social icons I have were automatically added by using the Admin Area -> Appearance -> Customize -> Travelify Social Links.

Can you help me understand what is required for this first part? I know how to add the custom css code after that.

Thank you in advance!

4

Just scrap that idea and add the URL in the Github section as shown in the attached screenshot and then use the below CSS code.

body .social-icons li.github a:before {
    content: "\f0e0";
    font-family: 'FontAwesome';
    display: block;
}
5

Thank you! I followed your instructions but ended up with an invisible social icon which turns black when hovered over:

Is there something I am missing?

6

You are doing something wrong in your child theme because the font-awesome.min.css file is not loading on your site.

Could you please share me your child theme so that i can troubleshoot it?

7

Hello @movin - How can I share my child theme? In the meantime, I added the following code which seemed to work:
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");
But I would like to correct the issue if I have done something wrong.

8

You have to download child theme directory using FTP or file manager.

Or would you mind if i log in to your site and do some troubleshooting? If this is ok then could you please share me your site log in details privately by checking the option “Set as private reply” when replying to this topic?

9

I believe I did download and activate the child theme following the instructions in the stickied thread at the top of this forum. I can surely share my login details with you. Do you need access to my wordpress, hosting, or both?

10

I need access to your WordPress site as an admin.

11

Hello @movin, the admin login details for my WordPress site are as follows:

http://mikemcewan.ca/wp-admin/
Username: Mikerosoft
Password: Movin2016

Thank you in advance,

12

Thank you for sharing the site details.

I resolved the issue on your site by changing the code in the function travelify_enqueue_styles in the functions.php file of your child theme.