Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #1128635

    Hi,
    I have added a custom social media icon for BookBub. The icon displays, but not properly on most desktop browsers. The icon should be BB in black on a white background but it displays a blank white icon only in Firefox and Safari. However it displays properly in Safari on all mobile devices I have checked it on. And on desktop on Chrome. Here’s the only custom CSS code I have regarding this icon. Can you help me figure this out? Thank you.

    #top #wrap_all .av-social-link-bookbubicon:hover a {
    color: #ffffff;
    background: red;
    }

    Susan

    #1128636

    I should have added my website. Sorry.

    #1128641

    you can see here a little guidance on how to use for example a png as social icon and use it like the others:
    https://kriesi.at/support/topic/adding-custom-social-icons-3/#post-934964

    so if that was the code above you want to use – you implemented that new icon by f.e.:

    function avia_add_custom_social_icon($icons) {
        $icons['BookBub'] = 'bookbubicon';
        return $icons;
    }
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
    #1128651

    I am not using a .png. I added it in Fontello.

    #1128656

    and how did you implement it to use it as social icon ?
    The reason why i ask is : did you realy use on that snippet : bookbubicon as short for the new icon – or bookbub ?

    because the red underlined part will be the addendum for the social-media class

    where did you get that fontello BB
    is there a link we can see your page?

    #1128668

    Here is how I registered the icon in theme functions. And as I said in first post it is displaying correctly in mobile browers so I don’t think it’s becasue I registered it incorrectly.

    // Register new icon as a theme icon
    function avia_add_custom_icon($icons) {
    $icons[‘bookbubicon’] = array( ‘font’ =>’bookbub’, ‘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[‘Bookbub’] = ‘bookbubicon’;
    return $icons;
    }
    add_filter(‘avf_social_icons_options’,’avia_add_custom_social_icon’, 10, 1);

    #1128692

    the code is so far correct – then i have to inspect the dom and css : either you post a link here so that I can check why this is so, or you have to leave the corresponding data for the mods in the private content – and wait til they find your post

    #1128704

    Hi thecszone,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    #1129020

    Thank you, Victoria. The information you need is listed below.
    Susan

    #1129305

    Hi Susan,

    https://cl.ly/5d3614c99599 THe icon does not look right, where did you get the font?

    Best regards,
    Victoria

    #1129319

    I created the font at http://fontello.com/ I did the same thing with the Goodreads font and it is working fine.

    #1129336

    Hi,

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

    Best regards,
    Jordan Shannon

    #1129375

    The icon still doesn’t display properly on Firefox or Safari so my problem hasn’t been solved.

    #1130072

    Hi,

    This has to be a cache issue cause I have loaded it and it works fine.

    Best regards,
    Basilis

    #1130134

    What browser and device did you look at it on? I have cleared my caches multiple times, and still on a laptop when I use Safari or Firefox the icon is a blank white box instead of two B’s. It works fine on Google Chrome desktop. And it works fine on Silk and mobile Safari just not Safari desktop.

    #1130821

    Hi,

    Thank you for the update.

    We’ve checked the site on MS Edge, Firefox, Firefox Dev, IE and Chrome. We are on Windows 10. The icon displays properly on every browser. Have you tried it on a different computer?

    Best regards,
    Ismael

Viewing 16 posts - 1 through 16 (of 16 total)
  • You must be logged in to reply to this topic.