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;
?>

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!