How to show custom social media icons in top bar - Support | Kriesi.at

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

Author

Posts
June 24, 2018 at 3:02 pm #977154

danielromanin
Participant

Hi i want to show custom social media icons in top bar at the right. I see there are many custom icons i can found on fontello.com and upload zip file in enfold child import tab. That is fine.

How do i make these icons appear in social media tab?

Please assist.

Regards
Aadil

June 24, 2018 at 7:23 pm #977179

Mike
Moderator

Hey danielromanin,
Please see this article
After you follow these steps you can add the custom icons at Enfold Theme Options > Social Profiles > Your social profiles

Best regards,
Mike

June 25, 2018 at 9:17 pm #977651

danielromanin
Participant

Hi Mike,

Do i have to do code for one icon at a time. For example i change “fontello” to spotify and added spotify code and it worked fine and i could see only spotify icon in the social profiles. I imported 3 icons but using above code you mentioned i could show only one icon in social profiles.

In simple words i want to import all icons in the social profiles i imported in the fontello import manager.

Please assist..

Regards
Aadil

June 26, 2018 at 1:24 am #977726
Ismael
Moderator
Hi,

You can create or add multiple custom icons in the filter. Example.
```
// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
	$icons['Spotify'] = array( 'font' =>'fontello', 'icon' => 'ue800');
        $icons['Netflix'] = array( 'font' =>'fontello', 'icon' => 'ue801');
        $icons['Slack'] = array( 'font' =>'fontello', 'icon' => 'ue802');
	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['Spotify'] = 'spotify';
        $icons['Netflix'] = 'spotify';
        $icons['Slack'] = 'slack';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
```
Adjust the icon name and icon code. You may also need to adjust the “font” parameter based on how you named the custom font.

Best regards,
Ismael
June 28, 2018 at 3:30 pm #978917

danielromanin
Participant

Hi @ismail,

Thanks it worked. Now these icons appearing on social profiles list .. I have selected these icons to appear on header but icons needs some css i believe.

Please check this screenshot : http://prntscr.com/k0eemb

Please find website URL in private content area.

Regards
Aadil

June 28, 2018 at 4:07 pm #978934

Yigit
Keymaster

Hi,

Please refer to this post – https://kriesi.at/documentation/enfold/social-share-buttons/#how-to-add-custom-social-icons-to-enfold-options :)

Cheers!
Yigit

June 28, 2018 at 9:10 pm #979063

danielromanin
Participant

Hi Yigit,

I have already done that. I think you did not read my message above. I can see icons are there : http://prntscr.com/k0ip9e but not visible. I don’t know what is the issue. Please check screenshot : http://prntscr.com/k0ip9e

Looking forward to the solution.

Regards
Aadil

June 28, 2018 at 9:15 pm #979069
Yigit
Keymaster
Hi,

Maybe i should have been more clear and point out the CSS code in the link i posted, sorry for the confusion.
Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child theme’s style.css file:

CSS Snippet:
```
#top #wrap_all .av-social-link-Spotify:hover a {
    color: #fff;
    background-color: #9fae37;
}
#top #wrap_all .av-social-link-Spotify a {
    color: #red;
    background-color: transparent;
}
```
Best regards,
Yigit
June 28, 2018 at 9:27 pm #979076

danielromanin
Participant

Hi Yigit,

Thanks for quick response. Please check its still not working for me : http://prntscr.com/k0iwow

I am using this code to :

// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
$icons[‘Spotify’] = array( ‘font’ =>’fontello’, ‘icon’ => ‘uf328’);
$icons[‘Amazon’] = array( ‘font’ =>’fontello’, ‘icon’ => ‘uf270’);
$icons[‘Itunes’] = array( ‘font’ =>’fontello’, ‘icon’ => ‘ue800’);
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[‘Spotify’]=’Spotify’;
$icons[‘Amazon’] = ‘Amazon’;
$icons[‘Itunes’] = ‘Itunes’;
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);

June 28, 2018 at 9:28 pm #979077

danielromanin
Participant

I need 3 icons to show :

Amazon
Spotify
Itunes

Please let me know if i am missing something.

Regards
Aadil

June 28, 2018 at 9:29 pm #979078

danielromanin
Participant

I have imported these 3 icons using fontello import option.

June 28, 2018 at 9:42 pm #979084

Yigit
Keymaster

Hey,

Could you please post WP admin logins here privately so we can look into it? Code needs to be adjusted and wanted to make sure icon codes are correct

Best regards,
Yigit

June 28, 2018 at 9:45 pm #979086

danielromanin
Participant

Please find login details in private content area yigit.

One more thing i need and that is to show these social media icons under main menu on mobile when hamburger icon is clicked. Can you do that too please?

Regards
Aadil

June 28, 2018 at 9:59 pm #979098

lerua99
Participant

hello i waiting from 50 hour support …when recive? #978121

June 29, 2018 at 1:08 pm #979341
Yigit
Keymaster
Hey,

I changed the code to following one
```
// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
	$icons['spotify_icon'] = array( 'font' =>'spotify', 'icon' => 'uf328');
        $icons['amazon'] = array( 'font' =>'spotify', 'icon' => 'uf270');
        $icons['itunes'] = array( 'font' =>'spotify', 'icon' => 'ue800');
	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['Spotify']='spotify_icon';
        $icons['Amazon'] = 'amazon';
        $icons['Itunes'] = 'itunes';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
```
Please review your website

Best regards,
Yigit
June 29, 2018 at 1:56 pm #979368

lerua99
Participant

Hello ty..please close this.
Best regards!

June 29, 2018 at 6:59 pm #979438

Yigit
Keymaster

Hi,

@lerua99 We will keep the thread open and will wait to hear from the creator of this thread. If you have any other questions or issues, please feel free to start a new thread.

Best regards,
Yigit

June 29, 2018 at 10:18 pm #979478

danielromanin
Participant

Hi thank you so much. It works like a charm. However when i hover icon i don’t see anything it means background color needs to be set like other 4 social media icons.

Please see this screenshot : http://prntscr.com/k0y8lk

June 30, 2018 at 3:02 am #979503
Mike
Moderator
Hi,
I added this css to your Quick CSS for the hover color of spotify, amazon, & iTunes
```
#top #wrap_all .social_bookmarks_spotify_icon:hover a {
    color: #fff;
    background-color: #1ED760;
}
#top #wrap_all .social_bookmarks_spotify_icon a {
    color:#de6739;
    background-color: transparent;
}
#top #wrap_all .social_bookmarks_amazon:hover a {
    color: #fff;
    background-color: #F79B34;
}
#top #wrap_all .social_bookmarks_amazon a {
    color: #de6739;
    background-color: transparent;
}
#top #wrap_all .social_bookmarks_itunes:hover a {
    color: #fff;
    background-color: #E837E0;
}
#top #wrap_all .social_bookmarks_itunes a {
    color: #de6739;
    background-color: transparent;
}
```
Please clear your browser cache and check.

Best regards,
Mike
Author

Posts

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

You must be logged in to reply to this topic.