WordPress | ACF | Social Media Links using Advanced Custom Fields and FontAwesome

social.php

<?php
if( have_rows('social_media', 'option') ):
	echo '<div class="container social my-4">';
	echo '<p class="follow mb-0 align-middle">Follow us</p>';
	echo '<ul class="nav align-middle">';
	while ( have_rows('social_media', 'option') ) : the_row();
		$socialchannel = get_sub_field('social_channel', 'option');
		$socialurl = get_sub_field('social_url', 'option');
		echo '<li class="nav-item">';
		echo '<a class="nav-link" rel="nofollow noopener noreferrer" href="' . $socialurl . '" target="_blank">';
		echo '<i class="fa fa-' . $socialchannel . '" aria-hidden="true"></i>';
		echo '<span class="sr-only hidden">' . ucfirst($socialchannel) . '</span>';
		echo '</a></li>';
	endwhile;
	echo '</ul>';
	echo '</div>';
endif;
?>

Updated in September 2017, when I realised the previous iteration was bloated.
This includes extra Bootstrap styles which could be useful, if not remove them and use the basic CSS above to get started.

Also note span.hidden is probably better not to be set to display:none as it renders it completely invisible to screen readers, instead go for this:

span.hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px; width: 1px;
margin: -1px; padding: 0; border: 0;
}

Some more info on how to install this would be great like what type of fields each should be... :)

Hey @DecoGrafics, sorry it was a bit vague, I've updated the first comment to include more detail. I hope it helps.

Hi, where to save social.php file? inside child-theme? in root?
Sorry I am a noob

appreciate it!

Great work! Awesome write up as well! I did something like this today on the job using your example. However, I used fa-youtube-play instead.

                <?php
                if (have_rows('social_media', 'option')):

                    echo '<div class="social-block">';

                    while (have_rows('social_media', 'option')) : the_row();

                        $socialchannel = get_sub_field('social_channel', 'option');
                        $socialurl = get_sub_field('social_url', 'option');

                        echo '<a rel="noopener" target="_blank" href="' . $socialurl . '"><i
                                class="fa fa-' . $socialchannel . '" aria-hidden="true"></i><i class="fa fa-' . $socialchannel . ' two"
                                                                                aria-hidden="true"></i></a>';
                    endwhile;
                endif;
                ?>

Nice work @theSalafee. Glad it helped!