Add New Social Icons in Follow Heading

The social buttons in the Follow panel are generated in function "alx_social_links" in functions.php. I copied the function to my child theme and edited it there. The full function is shown below. At the end of the function, just prior to the closing ul tag, I added two echo statements to generate the icons. I used the same classes that are assigned to the theme social icons, plus I added a class to the feedly image so I could style it using css.

/*  Social links
/* ------------------------------------ */
if ( ! function_exists( 'alx_social_links' ) ) {

    function alx_social_links() {
        if ( !ot_get_option('social-links') =='' ) {
            $links = ot_get_option('social-links', array());
            if ( !empty( $links ) ) {
                echo '<ul class="social-links">';
                foreach( $links as $item ) {

                    // Build each separate html-section only if set
                    if ( isset($item['title']) && !empty($item['title']) )
                        { $title = 'title="' .$item['title']. '"'; } else $title = '';
                    if ( isset($item['social-link']) && !empty($item['social-link']) )
                        { $link = 'href="' .$item['social-link']. '"'; } else $link = '';
                    if ( isset($item['social-target']) && !empty($item['social-target']) )
                        { $target = 'target="' .$item['social-target']. '"'; } else $target = '';
                    if ( isset($item['social-icon']) && !empty($item['social-icon']) )
                        { $icon = 'class="fa ' .$item['social-icon']. '"'; } else $icon = '';
                    if ( isset($item['social-color']) && !empty($item['social-color']) )
                        { $color = 'style="color: ' .$item['social-color']. ';"'; } else $color = '';

                    // Put them together
                    if ( isset($item['title']) && !empty($item['title']) && isset($item['social-icon']) && !empty($item['social-icon']) && ($item['social-icon'] !='fa-') ) {
                    echo '<li><a rel="nofollow" class="social-tooltip" '.$title.' '.$link.' '.$target.'><i '.$icon.' '.$color.'></i></a></li>';
                    }
                }


        // Add the feedly social link
            echo '<li><a rel="nofollow" class="social-tooltip" title="Feedly" href="http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Fwww.msn.com" target="_blank">
        <img class="feedly-img" src="http://s3.feedly.com/img/follows/feedly-follow-logo-green_2x.png"/></a></li>';

        // Add the flipboard social link
            echo '<li><a rel="nofollow" class="social-tooltip" data-flip-widget="flipit" href="https://flipboard.com" target="_blank">
        <script src="https://cdn.flipboard.com/web/buttons/js/flbuttons.min.js" type="text/javascript"></script></a></li>';


                echo '</ul>';
            }
        }
    }

}



I added this css to size and move the feedly icon. Something about the icons made the title bar expand down down a bit. I didn't have time to work on that so just took a couple of px off the vertical padding so it would line up:

.feedly-img {
height: 32px;
width: 32px;
margin-bottom: -8px;
}

.s1 .sidebar-top {
padding-top: 14px;
padding-bottom: 14px;
}