click to chat

Hi AlexBellaTropea,

Thanks for providing the admin access, I have modified your functions.php code to this:

function avia_add_custom_icon($icons) {
	$icons['Whatsapp']	 = array( 'font' =>'whatsapp', 'icon' => 'uf232');
	$icons['tripadvisor'] = array( 'font' =>'tripadvisor', 'icon' => 'ue808');
	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['Whatsapp'] = 'Whatsapp';
	$icons['Tripadvisor'] = 'Tripadvisor';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

Best regards,
Nikko

Hi AlexBellaTropea,

I have fixed the icon with this code (added some color):

#top .social_bookmarks [title='Tripadvisor'] {
    background-color: #5aa85d !important;
}

#top [title='Tripadvisor']:before {
    content: '\e808';
    font-family: 'fontello';
}

Unfortunately you can alter only the icon and the background color and it’s not possible to use multiple colors.

Best regards,
Nikko

Hi AlexBellaTropea,

You can see what codes to use when you just a create a new page then add an Icon Element, when you hover on the icon you will see its corresponding code.
You can find the instruction in our documentation: https://kriesi.at/documentation/enfold/icon/#how-to-find-the-icon-unicode
As for the thread you mention, can you give the url/link of it?

Best regards,
Nikko

Hi AlexBellaTropea,

I have modified the code to:

function avia_add_custom_icon($icons) {
	$icons['Whatsapp']	 = array( 'font' =>'whatsapp', 'icon' => 'uf232');
	$icons['Tripadvisor'] = array( 'font' =>'fontello', 'icon' => 'ue808');
	$icons['Google'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue8f6');
	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['Whatsapp'] = 'Whatsapp';
	$icons['Tripadvisor'] = 'Tripadvisor';
	$icons['Google'] = 'Google';
	return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

Then on Quick CSS, added this:

#top .social_bookmarks [title='Google'] {
    background-color: #dd4c39 !important;
}

Best regards,
Nikko

Hi AlexBellaTropea,

As for the header ‘review us’, please replace this CSS code:

#top .social_bookmarks .av-social-link-Tripadvisor {
    width: 106.5px;
}

with this one:

#top .social_bookmarks .av-social-link-Tripadvisor {
    width: 111px;
}

#top #header_meta .social_bookmarks .av-social-link-Tripadvisor:before {
    font-size: 14px;
}

As for mobile devices, add this CSS code:

@media only screen and (max-width:767px) {
  #top #socket .copyright {
    display: block;
    float: none;
    margin-bottom: 16px;
    text-align: center;
  }

  #top #socket .social_bookmarks {
    display: block;
    float: none;
    height: auto;
    margin-left: 0;
    text-align: center;
  }

  #top #socket .social_bookmarks li, 
  #top #socket .social_bookmarks li a, 
  #top .social_bookmarks:before {
    float: none !important;
    display: inline-block !important;
  }

  #top #socket .social_bookmarks li {
    margin: 0 4px;
  }

  #top #socket .social_bookmarks:before {
    margin-right: 2px;
  }
}

Hope this helps.

Best regards,
Nikko

Hi Alex,

We’re glad that we could help :)
Thanks for using Enfold and have a great day!

Best regards,
Nikko