Font Awesome icon not showing after adding from fontello - Support

Tagged: custom social icons, font awesome, fontello

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
January 14, 2022 at 7:57 pm #1335627
CalvaryCSD
Participant
Following the instructions here https://kriesi.at/support/topic/add-new-or-custom-social-icon/ we are able to add 2 icons to our system and have them display. What we noticed is if we choose an icon from FONT AWESOME the codes are different and don’t display at all. Why doesn’t the icons from Font Awesome display?

Here is our code where we have tired to follow all the examples in the support forums where we have modified the output in the functions.php code.
```
function avia_add_custom_icon($icons) {
$icons['itunes'] = array( 'font' =>'fontello', 'icon' => 'ue800');
$icons['play'] = array( 'font' =>'fontello', 'icon' => 'ue801');
$icons['icon-google'] = array( 'font' =>'fontello', 'icon' => 'ue802');
$icons['icon-spotify'] = array( 'font' =>'fontello', 'icon' => '0xf1bc');
$icons['amazon'] = array( 'font' =>'fontello', 'icon' => 'ue924');
$icons['podcast'] = array( 'font' =>'fontello', 'icon' => 'f2ce');
return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
$icons['iTunes'] = 'itunes';
$icons['Play'] = 'play';
$icons['Google Podcasts'] = 'icon-google';
$icons['Spotify'] = 'icon-spotify';
$icons['Amazon'] = 'amazon';
$icons['Podcast'] = 'podcast';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
```
- This topic was modified 2 years, 11 months ago by CalvaryCSD. Reason: updating section for code
January 14, 2022 at 8:30 pm #1335628
CalvaryCSD
Participant
UPDATE 2 : Caching issue? Icons from Zocial are now showing just fine: Still could never get the icons from font-awesome to show.

UPDATE: I went and removed all the FONT AWESOME icons from my download off of fontello and just went with icons that showed up from Zocial – now I have just a pencil? Here is the updated code:
```
// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
$icons['itunes'] = array( 'font' =>'fontello', 'icon' => 'ue800');
$icons['play'] = array( 'font' =>'fontello', 'icon' => 'ue801');
$icons['amazon'] = array( 'font' =>'fontello', 'icon' => 'ue802');
$icons['podcast'] = array( 'font' =>'fontello', 'icon' => 'ue803');
$icons['spotify'] = array( 'font' =>'fontello', 'icon' => 'ue804');
$icons['google'] = array( 'font' =>'fontello', 'icon' => 'ue805');
return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_custom_social_icon($icons) {
$icons['iTunes'] = 'itunes';
$icons['Play'] = 'play';
$icons['Amazon'] = 'amazon';
$icons['Podcast'] = 'podcast';
$icons['Spotify'] = 'spotify';
$icons['Google Podcasts'] = 'google';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
```
Viewing the DEMO HTML from fontello:

What it looks like on the site – the 2nd icon is supposed to be spotify (ue804)
- This reply was modified 2 years, 11 months ago by CalvaryCSD.
January 16, 2022 at 12:14 am #1335725

Mike
Moderator

Hi,
Thank you for your patience, I tried to recreate your Fontello icons in the same order, I linked the zip file below.
I used your function above:

and selected these as the social icons:

and they showed correctly on the frontend:

Please try using the zip file below and if it still doesn’t work for you include admin login in the Private Content area so we can be of more assistance.

Best regards,
Mike

January 20, 2022 at 12:47 am #1336278
CalvaryCSD
Participant
Mike – thank you so much! Strange how you’re icons showed up but mine didn’t show at all. I have downloaded what you have provided and went and downloaded Font-Awesome icons from fontello and what you gave me and what is downloaded are different.
1. the icons are different in their appearance, see the screen shot below.

2. when viewing the demo.html provided by fontello the icon codes are different.

It appears you downloaded all of the icons from the Zocial icon pack and not the font awesome.

As you can see from my first post I tried to do what I can to get the font-awesome pack to work but it doesn’t.
- This reply was modified 2 years, 11 months ago by CalvaryCSD. Reason: Updating text with more information
January 20, 2022 at 2:21 pm #1336363

Mike
Moderator

Hi,
Sorry, your last message was:

UPDATE: I went and removed all the FONT AWESOME icons from my download off of fontello and just went with icons that showed up from Zocial – now I have just a pencil? Here is the updated code:

so I followed your screenshot for the Zocial icons.
Please upload the zip file you are trying to use to DropBox so I can test and include an admin login to your site so if I sort it out I can make the adjustments to your site or see why it is not working.

Best regards,
Mike
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.