-
Posts
-
Hi
I need some more Icons in the Social Icons bar on Top.
As described in the ENFOLD forum and in Vimeo, I did as followed:1. with the PHP Snippet….
2. I get a new Drop Down Menu called «Icon Label» in SocialMedia Profile
3. Go to fontello.com, downloading 42 webfonts in a ZIP file
4. Import ZIP File in Import/Export, a new font «fontello» appears under default-font
Ok here we go, but the result is like that:
Empty Icon.
What did I miss? Do I need to adress the icon? In my case, I need the two bubbles.
Any ideas?Thank you
SteveHey Steve,
You should replace icon code “ue800” here – https://imgur.com/LHe8MZ8. You can simply add Icon element to your page and hover on the icon you would like to use and find out its icon code – https://imgur.com/a/2HrCEGI :)
If you wanted to add Trip Advisor icon (https://imgur.com/a/2HrCEGI), your code would look like following
// Register new icon as a theme icon function avia_add_custom_icon($icons) { $icons['trip_advisor'] = array( 'font' =>'tripadvisoricon', 'icon' => 'uf262'); 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['Trip Advisor'] = 'trip_advisor'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);Best regards,
YigitHi,
We would adjust the “Trip Advisor” code above to Telegram, but I checked fontello.com and found no “Telegram” icon font, so first you will want to find a Telegram svg and drag it into fontello.com to create a icon font:
Please note that colored SVG’s will not work, fontello.com should convert them into black and white.
then you will have the icon code needed for the function.Best regards,
MikeNot working with Fontello :-(
Is it possible to use FONT AWESOME Icons within Enfold?
<i class=”fab fa-telegram-plane”></i>Is it poosible to add TELEGRAM icon with the next update?
Thank you
Hi,
It is possible to use FONT AWESOME but it will not be in the icon choices, you will have to use the snippets such as:
<i class=”fab fa-telegram-plane”></i>
to add FONT AWESOME, Try adding this code to the end of your functions.php file in Appearance > Editor:function Font_Awesome_5(){ ?> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <?php } add_action('wp_head', 'Font_Awesome_5');we can make a feature request for the “TELEGRAM icon”, is it for the mobile and desktop messaging app?
Best regards,
Mikea bit offtopic but sometimes it is nice to use instead an image. You can use exactly the same code-snippet to register a new social share icon but with images ( png’s f.e.)
see documentation: https://kriesi.at/documentation/enfold/social-share-buttons/#gist85414748see here in my footer the usage of png file: https://webers-testseite.de/#footer
___________________________________
PS : entypo-fontello ( standard Enfold font icon set has that little paper-airplane too) :
function avia_add_custom_icon($icons) { $icons['telegram'] = array( 'font' =>'entypo-fontello', 'icon' => 'ue8b7'); return $icons; } add_filter('avf_default_icons','avia_add_custom_icon', 10, 1); function avia_add_custom_social_icon($icons) { $icons['Telegram'] = 'telegram'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);Hi,
@Guenni007 Thank you for pointing this out, I did find the entypo-fontello paper-airplane in another post and used the same
( 'font' =>'entypo-fontello', 'icon' => 'ue8b7');
Good tip 🙂Best regards,
MikeTip: on using images as on my example footer – and with white or black symbols you can style the hover state with f.e. filter : hue-rotate:
#top #wrap_all .av-social-link-telegram:hover a { -webkit-filter: hue-rotate(180deg); filter: hue-rotate(180deg); }Good evening and thanks all
it works fine, the «paper plane» icon is not the original TELEGRAM icon, but it’s ok for me ;-)
This works fine_
————–
// Register new icon as a theme icon
function avia_add_custom_icon($icons) {
$icons[‘telegram’] = array( ‘font’ =>’entypo-fontello’, ‘icon’ => ‘ue8b7’);
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[‘Telegram’] = ‘telegram’;
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);and for the «hover a», I did like this_
————–
#top #wrap_all .av-social-link-telegram:hover a {
color: #fff;
background-color: #2e87ca !important;
}Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)Best regards,
Mike
- The topic ‘Fontello Icons not working’ is closed to new replies.