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


Note :This snippet works only with the Classical style option. The Classical style option can be enabled in Appearance > Customize > Advanced > Theme Style. More about the theme style option here


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)

 

 

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();


Related Snippets you may also like


We can help you to implement this snippet

Coding is our job and we know WordPress inside and out. We can help you to customize your website with small chunks of code snippets like this one.

Send us your request and we'll get back to you quickly.



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

Comments are closed.