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”
Need to add multiple icon in footer. If i duplicate above code twice in js then its not working. Please help
Hi,
Try repeating only this line as shown below.
How can i add two or more social links in footer please share code for that ?
Hi,
It might be easier if you post it in the support forums at https://wordpress.org/support/theme/customizr
Hi,
Please post your functions.php. Which is line 10. Which version are you using?
The functions.php is:
?>
I am using Version: 1.0
I am a complete novice so have no idea what all this actually means…
Many thanks for your help 🙂
Hi I have treid to add this code to my child themes function.php, but I am getting this error message! I’m not sure what the reason behind this is! Any help is much appreciated! https://uploads.disquscdn.com/images/bbbefcb4a692c5aa2523bf531d6f521b658501f7055207dd1db3b64690a4deea.png https://uploads.disquscdn.com/images/7bfae0ed890ce4b2d27e0906b2e792815422c23a728f41b3f98b26e1d5032833.png
I tried to add the code to my child themes functions.php but then when I try to visit my webpage I get this message:
“Parse error: syntax error, unexpected ‘ ‘ (T_STRING) in /home/wbowazzt/public_html/wp-content/themes/child-theme-customizr/functions.php on line 18”
Can’t find the problem, what am I doing wrong?
Line 18 would be this line for me: $class = apply_filters( ‘tc_social_header_block_class’, ‘span5’ );
It will be easier to diagnose if you give the screenshot of the functions.php around line 18.
https://uploads.disquscdn.com/images/3aac08a1a26592b0b44c48ca688dec0a371354ec90dbb92172f43efe887ce273.png
Hi,
This could be due to missing quotes or some typo in line 18 or earlier.
Try commenting out line 18 or the entire function my_custom_credits and check if the issue persists. This will help in finding what went wrong.
Glad that it works 🙂
I just added the code in both stylesheet and functions of my child theme and I just get a white screen now can’t even access my dashboard 🙁
Please do not add this code to stylesheet. It has to be added only in functions.php
Hi Menaka, thanks for your reply. Yes that was the issue. I was able to get back to my dashboard by calling my hosting company, and yes it worked when added to the functions.php only. Thank you so much.
it has error when i copy to the child functions