Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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 GitHub

    As 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;
    }

    #1157556

    Hey annameis,
    Sorry for the late reply, here is the result I was able to achieve on my localhost:
    2019-11-16-161126
    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
    2019-11-16-161529
    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,
    Mike

    #1157954

    Thanks 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,
    Anna

    #1158129

    Hi,
    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');

    2019-11-19-055640
    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,
    Mike

    #1158203

    Thanks 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 ago by annameis.
    #1158232

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    #1158235

    You can close – thanks!

    #1158257

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Adding Discord icon’ is closed to new replies.