Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1217427

    Hi there,

    Where do I change the default youtube icon that Enfold uses for the social links?
    Google has confronted me with a list of requirements about my API key and one of them is that this icon is not allowed.
    They have specific requirements about what the icons should look like:

    https://www.youtube.com/about/brand-resources/#logos-icons-colors

    Regards,

    Marcel

    #1218305

    Hey vossenm,
    Sorry for the late reply, to change the default YouTube icon you will first need to download the new icon and import it in the Enfold Theme Options > Import/Export > Iconfont Manager
    Then edit your functions.php on line 256 find
    'youtube' => array( 'font' =>'entypo-fontello', 'icon' => 'ue921'),
    and change the icon code ue921 and the font name to your new one, such as uf16a if you choose this one:
    2020-05-31_205714.png
    Best regards,
    Mike

    #1218441

    Thank you very much, this definately does something, but the icon is now all red, the play button is not visible this way…

    I get the impression that I’m missing something, the icon you suggested is the one I want, but the downloaded file is called fontello-c4ea405.zip, I imported it as you said and there in the import manager it seems to be called ‘fontello’ and the code of this icon seems to be 0xf16a instead of uf16a when I open the demo.html file in the ZIP file….

    So what do you mean by ‘change the name’ , I tried almost any combination like this:

    ‘youtube’ => array( ‘font’ =>’fontello-c4ea405f’, ‘icon’ => ‘0xf16a’),
    ‘youtube’ => array( ‘font’ =>’fontello’, ‘icon’ => ‘0xf16a’),
    ‘youtube’ => array( ‘font’ =>’entypo-fontello’, ‘icon’ => ‘0xf16a’),
    ‘youtube’ => array( ‘font’ =>’entypo-fontello’, ‘icon’ => ‘uf16a’),

    But everything just makes the icon turn all red instead of showing a play button…
    why do they have to make this so complicated, why not just use simple PNG files?

    btw I already have some Custom ccs code to change the button colors, shouldn’t this be okay for the new one too?

    }
    #top #wrap_all .av-social-link-youtube a {
    color: #fff;
    background-color: #d81939;
    }

    Marcel

    • This reply was modified 4 years, 5 months ago by vossenm.
    #1218728

    Hi,
    On my localhost with the download fontello-c4ea405f.zip in my functions.php on line 256 I changed it to:
    'youtube' => array( 'font' =>'fontello', 'icon' => 'uf16a'),
    Please try this.
    Your css should be:

    #top #wrap_all .av-social-link-youtube a:hover {
    color: #fff;
    background-color: #d81939;
    }

    Then clear your browser cache and check.

    Best regards,
    Mike

    #1218796

    Thank you very much again, this works!

    Do you happen to know if a red background with a white playbutton is actually complying with youtube requirements?
    On their link is only an inverted version, white with a red playbutton…i made the background black for now, really strange that this red variation is not included….

    They sent me an email about it because of the API as you know, so they will check the site again…and I wanna make sure they don’t shut the API key down.

    Regards,

    Marcel

    • This reply was modified 4 years, 5 months ago by vossenm.
    #1219018

    Hi,
    Glad to hear it works, I checked the link again and the red background with a white playbutton is complying with youtube requirements, you can even download it from the page.

    Best regards,
    Mike

    #1219319

    Okay, thats nice to know, I downloaded the icon package and I see what you mean now… thanks again!

    Marcel

    #1219585

    Hi,

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

    Best regards,
    Jordan Shannon

    #1219732

    Thanks, maybe one more question:

    Which part of the code is responsible for the fact that the white part of the social icons turns green when hovered?
    Is that default or something in my Custom CSS? I think changing that into grey would look better…

    #1220101

    Hi,
    The css causing the green color on hover is this:

    #top #wrap_all .av-social-link-youtube:hover a, #top #wrap_all .av-social-link-mail:hover a, #top #wrap_all .av-social-link-facebook:hover a {
        color: #719430;
    }

    This custom css, probably in your Quick CSS, is for all 3 of your social icons, so if you want all 3 to be gray try changing the color to #aaaaaa.
    After editing the css, please clear your browser cache and check.

    Best regards,
    Mike

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