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


Note : the following code snippet requires advanced WordPress developer skills. There's no guarantee that this snippet works as is with the latest version of our themes, and with the latest version of WordPress. That's why you need to always test any code snippets in a staging environment before implementing it in a production site.


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


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

Comments are closed.