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


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

Comments are closed.