Adding Custom Social Media Icons - Support | Kriesi.at

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

Author

Posts
May 14, 2015 at 4:55 am #444084

mcraig77
Participant

Ahoy –

I tried following this post but couldn’t get it to work… https://kriesi.at/support/topic/add-tripadvisor-icon-to-social-media-tags/

I’m trying to add a fontello Icon which I successfully uploaded to my site. this is the code for my icon.

[av_font_icon icon='ue801' font='tripadvisor' style='' caption='' link='' linktarget='' size='40px' position='left' color=''][/av_font_icon]

I will also need to add this one:

[av_font_icon icon='ue800' font='tripadvisor' style='' caption='' link='' linktarget='' size='40px' position='left' color=''][/av_font_icon]

This icon works when I add it with shortcode.

How do I get this to show up in my social icons top bar? is it because of the font name element?

May 17, 2015 at 6:14 am #445342
Josue
Inactive Moderator
Hey!

Try adding this at the very end of your theme / child theme functions.php file:
```
// Add custom icons header elements
function avia_add_custom_icon($icons) {
	$icons['tripadvisor']	 = array( 'font' =>'tripadvisor', 'icon' => 'ue800');
	return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

function avia_add_custom_social_icon($icons) {
	$icons['TripAdvisor'] = 'tripadvisor';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
```
Cheers!
Josue
May 20, 2015 at 10:31 pm #447447

mcraig77
Participant

Ahoy –

I added that code but when I go under social in the enfold options there is no Yelp or Tripadvisor option still..

May 20, 2015 at 10:34 pm #447448

Josue
Inactive Moderator

Hi,

Can you please create us a WordPress administrator account? post it here as a private reply.

Regards,
Josue

May 20, 2015 at 10:40 pm #447451

mcraig77
Participant

This reply has been marked as private.

May 21, 2015 at 1:58 am #447486

Josue
Inactive Moderator

Hi!

Should appear now, check it.

Regards,
Josue

May 21, 2015 at 2:21 am #447491

mcraig77
Participant

Rocking Thanks, I see that the yelp one works… What about the tripadvisor?

May 21, 2015 at 2:38 am #447496

Josue
Inactive Moderator

Oh, there are two icons to be add, ok check it now.

Regards,
Josuie

May 21, 2015 at 2:46 am #447500

mcraig77
Participant

You rock Josue, seriously. Enfold support goes above and beyond!

Was that coded added to the php?

One more question, how to I add the background colors to the circles for those items?and how do I change the icon color for both top and scroll?

May 21, 2015 at 2:54 am #447502
Josue
Inactive Moderator
The code was added in Plugins > Edit Functions, to change the color/background color use this code in Quick CSS:
```
/* Top */
#top #wrap_all .av_header_transparency ul.social_bookmarks li a{
    color: blue; 
    background: green;
}

/* Scrolled */
#top #wrap_all ul.social_bookmarks li a{
    color: red; 
    background: yellow;
}
```
Regards,
Josue
May 21, 2015 at 2:59 am #447503

mcraig77
Participant

Thanks I added that code but I still have an issue with the background circle for the new icons we added. How do I make the yelp be red on rollover and the tripadvisor be green on rollover?

May 21, 2015 at 3:08 am #447505
Josue
Inactive Moderator
Try with this:
```
#top #wrap_all li.av-social-link-yell:hover a{
     background: red;
}
#top #wrap_all li.av-social-link-tripadvisor:hover a{
     background: green;
}
```
Regards,
Josue
May 21, 2015 at 6:35 am #447581

mcraig77
Participant

Great!

One more thing, i’ve noticed that the icon color for the stock icons is gray off hover but when rollovers turns white. The new icons that we added are just gray. Is it possible to change that rollover color to white as well?

May 21, 2015 at 9:44 am #447630
Josue
Inactive Moderator
Hi!

Just add color: white to it:
```
#top #wrap_all li.av-social-link-yelp:hover a{
     background: #C40A11;
     color: white;
}
#top #wrap_all li.av-social-link-tripadvisor:hover a{
     background: #579441;
     color: white;
}
```
Best regards,
Josue
May 21, 2015 at 7:08 pm #447933

mcraig77
Participant

Thanks.

I just noticed when I click on an icon a underline shows up for all icons.. is there a way to get rid of that?

https://www.dropbox.com/s/0fhnefbps8i7hag/Screenshot%202015-05-21%2010.04.20.png?dl=0

May 21, 2015 at 7:49 pm #447950
Josue
Inactive Moderator
Hey!

Use this:
```
#top .social_bookmarks li a {
    text-decoration: none !important;
}
```
Cheers!
Josue
October 5, 2015 at 2:21 pm #513796
Pink_Monkey
Participant
Hi Josue,

I’ve been trying to add an icon for Bloglovin to my site. I followed the instructions and got the .zip file uploaded and the icon working.
In the backend of my site i can only select it by selecting ‘Icon Label’ as the title of the icon. When I do this it does add the right icon to my site, but when I hover over it it says ‘icon_name’ instead of ‘Bloglovin’.

I figured it had to do with changing ‘icon_name’ and ‘Icon Label’ in the code below. But as soon as I change any of these the icon on my site changes to a pencil and still displays ‘icon_name’ on hover over.
```
// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
	$icons['icon_name']	 = 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['Icon Label'] = 'icon_name';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
```
October 5, 2015 at 10:46 pm #514072

Josue
Inactive Moderator

Did you try re-selecting the icon in the theme options?

Cheers!
Josue

October 6, 2015 at 8:44 am #514196

Pink_Monkey
Participant

Hi Josh,

Yes I did, but it didnt work.

Cheers!
Sebastiaan

October 6, 2015 at 10:18 pm #514818

Josue
Inactive Moderator

Hi,

Can you please create us a WordPress administrator account? post it here as a private reply.

Regards,
Josue

October 7, 2015 at 9:37 am #515045

Pink_Monkey
Participant

Done, And while you are at it, can you please also take a look at my other question if you have the time? Found here: https://kriesi.at/support/topic/advertising-bar-below-menu/

October 7, 2015 at 12:05 pm #515104

Josue
Inactive Moderator

Hi!

Check it now.

Cheers!
Josue

October 7, 2015 at 1:39 pm #515195

Pink_Monkey
Participant

Hi Josue,

this one works! Great. tnx!
Can you tell me what you changed so I can replicate it?

Cheers!
Sebastiaan

October 7, 2015 at 2:03 pm #515219

Josue
Inactive Moderator

Check the icon code in your child theme functions.php.

Best regards,
Josue

October 8, 2015 at 10:53 am #515687

Pink_Monkey
Participant

Thank you! I thought I did the same, but I think I made a typo or missed an item there.
Author

Posts

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

The topic ‘Adding Custom Social Media Icons’ is closed to new replies.