Social Media buttons in three columns

Question

We have a One Page website and we just created a 'Our Team' page (https://www.webovo.nl and go to 'Ons Team'). I added three social media buttons to the section-ourteam.php file. The problem is that i added 3 lines of codes to the div, but this way i am only able to add 3 links. Therefore, when i add my social media pages, all the buttons below every team-member icon have my social media pages.

I want to add different links to different team members. I understand it is a called member.thumb. How do i split the CSS so i can add individual links?

Can someone help? Rick

P.S: Look for the html remarks i made in the code. That is the code that i added myself. Below is the code that is currently in our section-ourteam.php file:

<?php
$onepress_team_id       = get_theme_mod( 'onepress_team_id', esc_html__('team', 'onepress') );
$onepress_team_disable  = get_theme_mod( 'onepress_team_disable' ) ==  1 ? true : false;
$onepress_team_title    = get_theme_mod( 'onepress_team_title', esc_html__('Our Team', 'onepress' ));
$onepress_team_subtitle = get_theme_mod( 'onepress_team_subtitle', esc_html__('Section subtitle', 'onepress' ));
$layout = intval( get_theme_mod( 'onepress_team_layout', 3 ) );
if ( $layout <= 0 ){
    $layout = 3;
}
$user_ids = onepress_get_section_team_data();
if ( onepress_is_selective_refresh() ) {
    $onepress_team_disable = false;
}
if ( ! empty( $user_ids ) ) {
    $desc = get_theme_mod( 'onepress_team_desc' );
    ?>
    <?php if ( ! $onepress_team_disable ) : ?>
        <?php if ( ! onepress_is_selective_refresh() ){ ?>
        <section id="<?php if ($onepress_team_id != '') echo $onepress_team_id; ?>" <?php do_action('onepress_section_atts', 'team'); ?>
                 class="<?php echo esc_attr(apply_filters('onepress_section_class', 'section-team section-padding section-meta onepage-section', 'team')); ?>">
        <?php } ?>
            <?php do_action('onepress_section_before_inner', 'team'); ?>
            <div class="container">
                <?php if ( $onepress_team_title || $onepress_team_subtitle || $desc ){ ?>
                <div class="section-title-area">
                    <?php if ($onepress_team_subtitle != '') echo '<h5 class="section-subtitle">' . esc_html($onepress_team_subtitle) . '</h5>'; ?>
                    <?php if ($onepress_team_title != '') echo '<h2 class="section-title">' . esc_html($onepress_team_title) . '</h2>'; ?>
                    <?php if ( $desc ) {
                        echo '<div class="section-desc">' . apply_filters( 'the_content', wp_kses_post( $desc ) ) . '</div>';
                    } ?>
                </div>
                <?php } ?>
                <div class="team-members row team-layout-<?php echo intval( 12 / $layout  ); ?>">
                    <?php
                    if ( ! empty( $user_ids ) ) {
                        $n = 0;

                        foreach ( $user_ids as $member ) {
                            $member = wp_parse_args( $member, array(
                                'user_id'  =>array(),
                            ));

                            $link = isset( $member['link'] ) ?  $member['link'] : '';
                            $user_id = wp_parse_args( $member['user_id'],array(
                                'id' => '',
                             ) );

                            $image_attributes = wp_get_attachment_image_src( $user_id['id'], 'onepress-small' );
                            if ( $image_attributes ) {
                                $image = $image_attributes[0];
                                $data = get_post( $user_id['id'] );
                                $n ++ ;
                                ?>
                                <div class="team-member wow slideInUp">
                                    <div class="member-thumb">
                                        <?php if ( $link ) { ?>
                                            <a href="<?php echo esc_url( $link ); ?>">
                                        <?php } ?>
                                        <img class="img-center" src="<?php echo esc_url( $image ); ?>" alt="">
                                        <?php if ( $link ) { ?>
                                            </a>
                                        <?php } ?>
                                        <?php do_action( 'onepress_section_team_member_media', $member ); ?>
                                    </div>
                                    <div class="member-info">
                                    <h5 class="member-name"><?php if ( $link ) { ?><a href="<?php echo esc_url( $link ); ?>"><?php } ?><?php echo esc_html( $data->post_title ); ?><?php if ( $link ) { ?></a><?php } ?></h5>
                                     <span class="member-position"><?php echo esc_html( $data->post_content ); ?></span>

                <!-- Code added by me --> 
                                    <div class="address-contact">
                                    <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span>
                                    </div>
                                    <div class="address-contact">
                                    <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span>
                                    </div>
                                    <div class="address-contact">
                                    <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-linkedin fa-stack-1x fa-inverse"></i></span>
                                    </div>
 <!-- the code below is not added by me --> 
                                    </div>
                                </div>
                                <?php
                            }

                        } // end foreach
                    }

                    ?>
                </div>
            </div>
            <?php do_action('onepress_section_after_inner', 'team'); ?>
        <?php if ( ! onepress_is_selective_refresh() ){ ?>
        </section>
        <?php } ?>
    <?php endif;
}

Answer 1

Based on your request here's a simple solution.

h5.member-name {
  display: block;
  margin: 0 0 5px;
}
.member-position {
  margin: 0 0 15px;
  display: block;
}

.fa-stack {
  position: relative;
  float: left;
  margin: 0 10px 0 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="member-info">
  <h5 class="member-name">MEMBER NAME</h5>
  <span class="member-position">position</span>
  <div class="address-contact">
    <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span>
  </div>
  <div class="address-contact">
    <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span>
  </div>
  <div class="address-contact">
    <span class="fa-stack"><i class="fa fa-circle fa-stack-2x"></i><i class="fa fa-linkedin fa-stack-1x fa-inverse"></i></span>
  </div>
</div>