Divi is a wonderful framework, but it does have limitations. Customizing the top bar can be a pain, which is why I’ve created the tutorial above.

What Is Shown in this Divi Tutorial

  • Move the social media icons to the left side of the header
  • See what social media icons are available in the Elegant Icon Font set
  • Hide the phone and email icons
  • Locate the right file (social_icons.php)
  • Replace and/or add social media icons to meet your needs
  • Add custom styles to the social media icons to match your theme

References

Click here to download the Elegant Icon Font shown in the video.

Copy the code below and insert it into your social_icons.php file before the </ul> tag. Change the link and the MySpace text to fit your needs.

<li class="et-social-icon et-social-myspace">
<a href="http://trumani.com/change-me" class="icon">
<span><?php esc_html_e( 'MySpace', 'Divi' ); ?></span>
</a>
</li>