Social Media buttons in three columns - php

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 ) { ?><?php } ?><?php echo esc_html( $data->post_title ); ?><?php if ( $link ) { ?><?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>