How to add custom social icon from FontAwesome V5?

Posted in .

To add custom social icon from FontAwesome collection to the theme, please go here and pick your desired icon:
FontAwesome Social Icons

When you pick your icon, please copy its code, you will need it later.
In this tutorial, we will add the TikTok icon:
https://fontawesome.com/v6/icons/threads?f=brands&s=solid
Its code is e07b
https://i.imgur.com/QHdskMR.jpg

When you got the code of your desired icon, please make sure you’re using the child theme and put the following code in your child theme’s functions.php file:

function my_presscore_get_social_icons_data($icons) {
$icons['tiktok'] = __('TikTok', 'the7mk2');
return $icons;
}
add_filter( 'presscore_get_social_icons_data', 'my_presscore_get_social_icons_data' );

Remember to change the social network name to your desired – please keep the first appearance of the name ($icons[‘tiktok‘]) in lowercase.

Next, please go to Theme Options -> Advanced -> Custom CSS and put in the following CSS code:

.tiktok .soc-font-icon:before, .dt-icon-tiktok:before {
    content: "\e07b";
}
.tiktok .soc-font-icon{
    font-family: "Font Awesome 5 Brands" !important;
    font-weight:900;
}

Here you need to change the names of classes (tiktok) to the name of the network you’ve used in the code before ($icons[‘tiktok‘]), and the code of the icon (content: “\e07b“;), to the code of the icon you’ve picked – remember to keep the slash “\” before the code.

After that, please go to Theme Options -> Top Bar & Header -> Microwidgets and set the new icon in the Social Icons widget.

PS. If you set the icon, but you don’t see it on the front-end, please go to your dashboard The7->Icons Manager, and make sure the FontAwesome 5 icons are installed.

0