Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #794098

    Hi enfold team,

    This time I try to put some custom icon on the top bar. The custom icon are in png (as i cannot add a svg in the media library). I try to follow two methods that you advice but it’s not working… Do you have an idea ?

    1st method : http://kriesi.at/documentation/enfold/custom-social-icons/

    I put the code in functions.php and i have acces to the icon in the social profil manager but when I apply the css it’s not working…

      in functions.php :
    // Changer les icones socials———————–*/
    // Add new icon as an option for social icons
    function avia_add_custom_social_icon($icons) {
    	$icons['picto mail-01'] = 'picto-mail-01';
    	$icons['picto insta-01'] = 'picto-insta-01';
    	return $icons;
    }
    add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);
      in style.css :
    #top #wrap_all .av-social-link-picto-mail-01 a:before {
        content: "";
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        background: url(https://bijouterie-valer.fr/wp-content/uploads/2017/05/picto-mail-01.png) no-repeat center center;
        background-size: contain;
    }
    #top #wrap_all .av-social-link-picto-insta-01 a:before {
        content: "";
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
        background: url(https://bijouterie-valer.fr/wp-content/uploads/2017/05/picto-insta-01.png) no-repeat center center;
        background-size: contain;
    }

    2nd method:: https://kriesi.at/support/topic/custom-social-media-icons-5/

      in style.css
    #top .social_bookmarks li:hover a {
        background: transparent !important;
    }
    #top .social_bookmarks li a:before{
        content: "";
        display: block;
        width: 20px;
        height: 20px;
    }
    #top .social_bookmarks li.social_bookmarks_picto-mail-01 a:before {
        background: url(https://bijouterie-valer.fr/wp-content/uploads/2017/05/picto-mail-01.png) center center no-repeat;
        background-size: contain;
    }
    #top .social_bookmarks li.social_bookmarks_picto-insta-01 a:before {
        background: url(https://bijouterie-valer.fr/wp-content/uploads/2017/05/picto-insta-01.png) center center no-repeat;
        background-size: contain;
    }

    I came back to the custom icon from fontello and flaticon while I foudn a solution for this problem.

    Thank you very much !
    Best regars,
    Clement

    #794441

    Hey Clement,

    I checked your website, the code you inserted in functions.php file is correct and icons show up fine on my end. Have you figured it out already? :)

    Best regards,
    Yigit

    #794502

    Hi Yigit,

    Lol no, this was the previous solution I used but the webdesigner insist that we use his picto rather than flaticon and fontello picto… That’s why I need a way to put the png instead of the icons from fontello and flaticon…

    I set up the previous solution before asking you.

    Thanks,
    Clement

    #795097

    Hi,

    Have you tried to replace the icon class, with the CSS content: rule?
    It is been used to replace icons with an image for example

    Best regards,
    Basilis

    #795144

    Hi Basilis,

    OOohhhh now I understand !! thanks for the advice :) Before I used the CSS content: without understand what I did…
    Now that’s I understand a bit more I try this :

    #top .social_bookmarks li.social_bookmarks_flaticon-ig a:before {
    content: url(https://bijouterie-valer.fr/wp-content/uploads/2017/05/picto-insta-01.png);
        width: 20px;
        height: 20px;
        display: inline-block;
        vertical-align: middle;
    }

    screenshot when I apply the modification

    wich works but the result isn’t beautiful… certainly cause of the picto itself….

    If I can push my luck and ask which way is the better way to add a hover effect on it ? With a filter or simply design another image ?
    If not I understand :)

    Thanks a lot anyway !
    Clement

    #795920

    Hi Clement,

    Looks like you got it all working! Or do you still need some help?

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #795960

    Hi Victoria,

    It’s ok thanks a lot once again, you can close the topic.

    Best regards,
    Clement

    #796302

    Hi,

    Gread, glad you got it working. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Social icon from image in top bar’ is closed to new replies.