Add a custom Phone Number Font Awesome icon to the Social Icons

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

Following up the popularity of this Customizr snippet Adding a custom social profile link with icon in the header from Nicolas, we created a variation for adding a custom Font Awesome icon for the phone number.
It requires a small function into our child-theme file functions.php.
The following snippet includes all the 3 scenarios: Social Links section in the Header, Footer or Sidebar; just fill in your phone number in the href="tel:+1 123-456-7890".
Eventually the phone number can be also displayed as linked text (between the target="_self">123-456-7890, but since the available space for Social Icons is limited you’ll have to style it accordingly.

1 – Filtering (php code in functions.php)

/********************************************************/
/* Add a custom Phone Number icon to the Social Icons
/********************************************************/
// Header section
add_filter ( 'tc_social_in_header' , 'custom_icon_phone_number' );
function custom_icon_phone_number() {
  //class
  $class =  apply_filters( 'tc_social_header_block_class', 'span5' );
  ob_start();
?>
  <div class="social-block <?php echo $class ?>">
    <?php if ( 0 != tc__f( '__get_option', 'tc_social_in_header') ) : ?>
      <?php echo tc__f( '__get_socials' ) ?>
        <a class="social-icon" href="tel:+1 123-456-7890" title="Call us" target="_self"><span class="fa fa-phone"></span></a>
      <?php endif; ?>
  </div>
<?php
  $html = ob_get_contents();
  ob_end_clean();
  return $html;
}

 

// Footer section
add_filter ( 'tc_colophon_left_block' , 'custom_icon_phone_number_footer' );
function custom_icon_phone_number_footer() {
  $class =  apply_filters( 'tc_colophon_left_block_class', 'span3' );
  ob_start();
?>
  <div class="social-block <?php echo $class ?>">
    <?php if ( 0 != tc__f( '__get_option', 'tc_social_in_footer') ) : ?>
      <?php echo tc__f( '__get_socials' ) ?>
        <a class="social-icon" href="tel:+1 123-456-7890" title="Call us" target="_self"><span class="fa fa-phone"></span></a>
      <?php endif; ?>
  </div>
<?php
  $html = ob_get_contents();
  ob_end_clean();
  return $html;
}

 

// Sidebar section
add_filter ( 'tc_social_in_sidebar' , 'custom_icon_phone_number_sidebar' );
function custom_icon_phone_number_sidebar() {
  $class =  apply_filters( 'tc_sidebar_block_social_class', 'widget_social' );
  ob_start();
?>
  <div class="social-block <?php echo $class ?>">
    <?php if ( 0 != tc__f( '__get_option', 'tc_social_in_left-sidebar') ) : ?> 
      <?php echo tc__f( '__get_socials' ) ?>
        <a class="social-icon" href="tel:+1 123-456-7890" title="Call us" target="_self"><span class="fa fa-phone"></span></a>
      <?php endif; ?>
  </div>
<?php
  $html = ob_get_contents();
  ob_end_clean();
  return $html;
}

Note: To use additional Font Awesome icons we need to enable them through the customize option panel.

Select Customize, Advanced option, Front-end Icons (Font Awesome) and enable Load Font Awesome CSS

Where to copy/paste this code?
Add it to your child-theme functions.php and to your style.css.
Everything you need to know about creating a child theme with Customizr here.

Thanks to Rocco for improving the original code with the use of ob_start();

16 thoughts on “Add a custom Phone Number Font Awesome icon to the Social Icons”

Comments are closed.