Add Social Icons in DIVI

  DIVI, Social Media

Click here for some great instructions on how to add social media icons to the Elegant Theme’s DIVI theme. It does take some technical know how.  Here’s some abbreviated instructions.

  1. In the style.css is the list of codes:
    .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-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; }
  2. In the includes/social_icons.php file you’ll see the actual code that shows social media icons on your webpage.
    <ul class=”et-social-icons”><?php if ( ‘on’ === et_get_option( ‘divi_show_facebook_icon’, ‘on’ ) ) : ?>
    <li class=”et-social-icon et-social-facebook”>
    <a href=”<?php echo esc_url( et_get_option( ‘divi_facebook_url’, ‘#’ ) ); ?>” class=”icon”>
    <span><?php esc_html_e( ‘Facebook’, ‘Divi’ ); ?></span>
    </a>
    </li>
    <?php endif; ?>
    <?php if ( ‘on’ === et_get_option( ‘divi_show_twitter_icon’, ‘on’ ) ) : ?>
    <li class=”et-social-icon et-social-twitter”>
    <a href=”<?php echo esc_url( et_get_option( ‘divi_twitter_url’, ‘#’ ) ); ?>” class=”icon”>
    <span><?php esc_html_e( ‘Twitter’, ‘Divi’ ); ?></span>
    </a>
    </li>
    <?php endif; ?>
    <?php if ( ‘on’ === et_get_option( ‘divi_show_google_icon’, ‘on’ ) ) : ?>
    <li class=”et-social-icon et-social-google-plus”>
    <a href=”<?php echo esc_url( et_get_option( ‘divi_google_url’, ‘#’ ) ); ?>” class=”icon”>
    <span><?php esc_html_e( ‘Google’, ‘Divi’ ); ?></span>
    </a>
    </li>
    <?php endif; ?>
    <?php if ( ‘on’ === et_get_option( ‘divi_show_rss_icon’, ‘on’ ) ) : ?>
    <?php
    $et_rss_url =  !== et_get_option( ‘divi_rss_url’ )
    ? et_get_option( ‘divi_rss_url’ )
    : get_bloginfo( ‘comments_rss2_url’ );
    ?>
    <li class=”et-social-icon et-social-rss”>
    <a href=”<?php echo esc_url( $et_rss_url ); ?>” class=”icon”>
    <span><?php esc_html_e( ‘RSS’, ‘Divi’ ); ?></span>
    </a>
    </li>
    <?php endif; ?>

    </ul>

  3. To add one that’s missing, reference bullet point 1 and find the social media missing and add another <li>……. before the  </ul>  Example:
    <li class=”et-social-icon et-social-youtube”>
    <a href=”http://youtube.com/u/yourusername‎” class=”icon”>
    <span><?php esc_html_e( ‘YouTube’, ‘Divi’ ); ?></span>
    </a>
    </li>

 

Have fun!

 

 

LEAVE A COMMENT