Source

• https://www.elegantthemes.com/blog/divi-resources/how-to-add-more-social-media-icons-divi
• https://help.elegantthemes.com/en/articles/2236011-how-to-add-more-social-icons-to-divi-header-and-footer
• Or use the theme builder with the social icon module

Create a child theme an copy the file social_icons.php from the includes folder in there:
/wordpress/wp-content/themes/HWS-Child/includes/social_icons.php

Edit that file and add the following for each channel:

• et-social-pinterest = the name of the channel
• https://nl.pinterest.com/accountname/ = the public link to your account

<li class="et-social-icon et-social-pinterest">
<a href="https://nl.pinterest.com/accountname/" target="_blank" class="icon">
<span><?php esc_html_e( 'Pinterest', 'Divi' ); ?></span>
</a>
</li>
Code language: HTML, XML (xml)

Since Divi 4.10 with the speed optimization you also need to:

• Disable dynamic icons in the them options performance tab
• Add some custom css in the theme options, or in the above mentioned php file (in php between <style> tags)

<style>
#top-header li.et-social-icon.et-social-linkedin a:before,
#footer-bottom li.et-social-icon.et-social-linkedin a:before {
    content: "\e09d" !important;
    font-family: ETmodules !important;
}

#top-header li.et-social-icon.et-social-pinterest a:before,
#footer-bottom li.et-social-icon.et-social-pinterest a:before {
    content: "\e095" !important;
    font-family: ETmodules !important;
}

#top-header li.et-social-icon.et-social-youtube a:before,
#footer-bottom li.et-social-icon.et-social-youtube a:before {
    content: "\e0a3" !important;
    font-family: "ETModules" !important;
}
#top-header li.et-social-icon.et-social-skype a:before,
#footer-bottom li.et-social-icon.et-social-skype a:before {
    content: "\e0a2" !important;
    font-family: ETmodules !important;
}
</style>
Code language: HTML, XML (xml)

Available icons (first red part)

• .et-social-facebook a.icon:before { content: ‘e093’; }
• .et-social-twitter a.icon:before { content: ‘e094’; }
• .et-social-google-plus a.icon:before { content: ‘e096’; }
• .et-social-pinterest a.icon:before { content: ‘e095’; }
• .et-social-linkedin a.icon:before { content: ‘e09d’; }
• .et-social-tumblr a.icon:before { content: ‘e097’; }
• .et-social-instagram a.icon:before { content: ‘e09a’; }
• .et-social-skype a.icon:before { content: ‘e0a2’; }
• .et-social-tiktok a.icon:before { content: ‘e07b’; } – font-family: FontAwesome
• .et-social-flikr a.icon:before { content: ‘e0a6’; }
• .et-social-myspace a.icon:before { content: ‘e0a1’; }
• .et-social-dribbble a.icon:before { content: ‘e09b’; }
• .et-social-youtube a.icon:before { content: ‘e0a3’; }
• .et-social-vimeo a.icon:before { content: ‘e09c’; }
• .et-social-rss a.icon:before { content: ‘e09e’; }

This doesn’t work:

• .et-social-google-plus a.icon:before { content: ‘f1a0; } + font-family: FontAwesome !important;

Add your own icons

To add your own icon, like TripAdvisor, add this to the custom css. Make sure the image has the same size as the secondary menu bar font size.

/* -- START tripadvisor social icon -- */

<li class="et-social-icon et-social-tripadvisor ">
    <a href="https://tripadvisorurl/‎" class="icon">
    	<img src="https://urltoicon.png" alt="tripadvisor">
        <span><?php esc_html_e( Tripadvisor', 'Divi' ); ?></span>
    </a>
</li>
/* -- END tripadvisor social icon -- */
Code language: JavaScript (javascript)

Alternative

/* -- START tripadvisor social icon -- */
.et-social-tripadvisor a {
display: block;
}
.et-social- tripadvisor a.icon::before {
    content: url('/wordpress/wp-content/uploads/icon-publitas.png');
}
/* -- END tripadvisor social icon -- */
Code language: CSS (css)