You'll want to the change the URL's of the social media icons in the Secondary Menu, and perhaps add new icons like Instagram.


For tablets and mobile phones, the social media icons are in the bottom Footer, NOT the mobile menu. Both of these sections will need to be updated. You may delete any pre-configured icons as you wish.


In this tutorial we're going to add Instagram to the social icons in both sections. Please follow the steps below:


1. This child theme utilizes FontAwesome 4.7. This means you can find and install any icons from the following link: https://fontawesome.com/v4.7.0/icons/


Simply search for a topic to filter results. In our case we're searching for "Instagram". You can also scroll through the list of included icons in FontAwesome 4.7.


Note: Due to a major change in the FontAwesome 5 update, we will not be updating this child theme to a later version than 4.7.


2. Grab the "i class" code for the icon. In our example it's <i class="fa fa-instagram" aria-hidden="true"></i>. Paste it into a Notepad application.


3. In your WP Dashboard, navigate to Appearance > Menus > select "Secondary Menu" > add a "Custom Link" to the menu > put the URL to your Instagram account > add the <i class> code saved to your Notepad. To match the other social icons, change the code to <i class="fa fa-instagram" title="Instagram"></i> (though it can be different should you wish).



4. Save your menu and refresh the homepage. You should see the Instagram icon in the Desktop view of your website. Next, we'll add the Instagram icon to the Footer for mobile devices.


5. In the Admin Dashboard head to Divi > Divi Library. In Layouts, look to the bottom of the list for "5 Star Footer" > click "Edit"



6. For the row entitled "Footer Menu Social Media Icons - TABLET/MOBILE", click the hamburger icon to Edit the Module.



7. In the "Content" tab, you will see what appears to be a blank screen in the content box. Click the "Text" tab on the right of the content section and you'll see the "i class" codes for FontAwesome.


8. Paste in the FontAwesome Instagram code used in your Secondary Menu. The image below shows how it should be implemented. Note that there's two spaces between each "i class code" in this module.



9. This will add the Instagram icon to your Mobile Footer, but these links need to be clickable. Please add the following "a href" wrapper to each "i class" code, so they link to your social accounts: <a href="your link here"><i class="fa fa-instagram" title="Instagram"></i></a>



10. "Save & Exit" the module, then Update the Layout. 


Now when you visit your website on any device, you should see your updated social media icons reflected.


If for some reason this process does not work for you as expected, please consider an alternate solution to display your mobile social icons like using the "Code Module" instead of this "Text Module" solution.