-
AuthorPosts
-
November 13, 2019 at 5:53 pm #1156455
Hi,
I would like to add an icon for the social media platform Discord to my website. I have read and followed this from the documentation but am not getting anywhere. I have put the info I’m using in private content. Can you please advise. Thanks! Anna
Using images or non-Fontello icons
In case the icon you want to use is not available in Fontello or can not be imported to it because its an image (jpg, png, etc) you can do it by using the following code in functions.php:
// We’ll use the Kriesi.at glyph for this example
function avia_add_custom_social_icon($icons) {
$icons[‘Kriesi’] = ‘kriesi’;
return $icons;
}
add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);
view rawfunctions.php hosted with ❤ by GitHubAs there is no font-face file to use for this icon we’d need to manually set its contents via CSS:
In case of using an image#top #wrap_all .av-social-link-kriesi a:before{
content: “”;
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
background: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png) no-repeat center center;
background-size: contain;
}November 16, 2019 at 11:19 pm #1157556Hey annameis,
Sorry for the late reply, here is the result I was able to achieve on my localhost:
this is the functions.php code:function avia_add_custom_social_icon($icons) { $icons['discord'] = 'discord'; return $icons; } add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
this is the css:
#top #wrap_all .av-social-link-discord a:before{ content: ""; width: 30px; height: 30px; display: inline-block; vertical-align: middle; background: url([your-domain]/wp-content/uploads/2019/11/iu.png) no-repeat center center; background-size: contain; }
then I choose “discord” in the social profiles
If you sill have any issues then you may have curly quotes in your code, otherwise include an admin login and I’ll take a look.Best regards,
MikeNovember 18, 2019 at 9:20 pm #1157954Thanks for the reply Mike. I have added the code per your instructions, but I must be missing something. I can’t get it to show up in my Social Profiles menu. I’ve included admin info below. Would you mind taking a look at my code?
Thanks so much,
AnnaNovember 19, 2019 at 12:57 pm #1158129Hi,
Thank you for the login, this is odd, I’m not sure why this is not working on your site I had tested it on mine?
So in the interest of getting this done, I choose a social icon that you are not using “VK”, and then changed your css to this:#top #wrap_all .av-social-link-vk a:before{ content: ""; width: 30px; height: 30px; display: inline-block; vertical-align: middle; background: url([your-site]/wp-content/uploads/2019/11/iu.png) no-repeat center center; background-size: contain; }
and then changed the “VK” title to “Discord” with this script in your functions.php:
function custom_discord_title(){ ?> <script> (function($){ $(window).load(function(){ $('.av-social-link-vk a').attr('title','Discord'); }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_discord_title');
Please change the link in your social profiles as I didn’t know what it was.
Please clear your browser cache and check.Also please note that I see you have some other changes in your functions.php & functions-enfold.php and you are not using a child theme, so your changes will be lost with future theme updates Read about child themes & Get it here
Please let us know if you want a hand with installing a child theme.Best regards,
MikeNovember 19, 2019 at 5:32 pm #1158203Thanks Mike – I appreciate the help very much! Looks great and I will check out the child theme.
Thanks-
Anna- This reply was modified 5 years, 1 month ago by annameis.
November 19, 2019 at 6:50 pm #1158232Hi,
Did you need additional help with this topic or shall we close?
Best regards,
Jordan ShannonNovember 19, 2019 at 6:55 pm #1158235You can close – thanks!
November 19, 2019 at 7:32 pm #1158257Hi,
If you need additional help, please let us know here in the forums.
Best regards,
Jordan Shannon -
AuthorPosts
- The topic ‘Adding Discord icon’ is closed to new replies.