Tagged: 

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #574853

    Is it possible to use our own custom social media icons? (e.g. by replacing icon files within the theme). Also can I insert some new icons that I want to use? They are not exactly social media – they are google play and iOS buttons that point towards app downloads. Can I do this within theme options or do I have to get my hands into the PHP code? If it’s a coding job, can it be achieved using the child theme?

    Thank you

    #575085

    Hi rarch47!

    You can add custom social icons using child themes. Please see the link below which provides you with instructions

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

    Best regards,
    Vinay

    #575135

    Thanks Vinay, I did do an earlier search and found that forum topic but I don’t think it really helps me. The icons I want to use are PNG bitmap images that have been custom built. They are also in colour and bigger than the ones that display on Enfold.

    #575177

    Hi!

    PNG images are currently not supported for social icons. It requires a lot of customization to use custom png social icons you need to make a css sprits use a site like http://www.spritecow.com/ make one image out of all social icons and upload to your server then setup social icons as usual in the theme options and override the svg icons using css sprit icons this is a lot of customization you probably need to hire a freelancer. but if you like us to give it a try set it up and send us the link we will try to do it for you if it is not going to take a lot of time we will definitely help you.

    Regards,
    Vinay

    • This reply was modified 8 years, 2 months ago by Vinay.
    #575197

    I think I will just edit the relevant included PHP file – don’t worry about it being a dashboard theme options capability.
    I really want the social media icons to stand out and not be so subtle as they are on the current theme – honestly many users will not even notice the social media icons – and I think they are more important than that.

    Can you show me which PHP file inserts the social media icons? I will make a copy of it within my child theme. No need for a freelancer. I have built my own themes before using Foundation but this time I want to make the site quickly and have my client reconfigure it easy themselves and not have to ask me to do it.

    #575207

    Hi!

    No need to edit PHP files, all you need to do is check how the default icons are rendered by Enfold and overwrite them with your custom images (using CSS), for example for icon elements:

    .iconbox_icon:before {
        content: "";
        background: url('_URL_to_PNG_here_');
        background-size: contain;
        width: 20px;
        height: 20px;
        display: block;
    }

    Cheers!
    Josue

    #585823

    I just tried to find that css but could not find it. Found something close in the shortcodes.css but still was not it.
    I went via the web inspector and have discovered that the social icons are actually fonts. I don’t think this is an easy job to change to switch out font icons with bitmap images.

    Sure editing the header.php or other associated file is not an easier option?

    #585843

    What icon element you want to change?

    #585943

    I want to change the icon element that appears at the top of the page in the in the header social icons option.
    Here are the files I want to replace them with:

    http://ausidentities.com.au/members/wp-content/themes/np/images/facebook.svg
    http://ausidentities.com.au/members/wp-content/themes/np/images/twitter.svg
    http://ausidentities.com.au/members/wp-content/themes/np/images/youtube.svg

    and the last two are bitmap pngs as I could not find suitable SVG versions:

    http://ausidentities.com.au/members/wp-content/themes/np/images/app-store-btn.png
    http://ausidentities.com.au/members/wp-content/themes/np/images/google-play-btn.png

    I am migrating/updating this website http://ausidentities.com.au/

    #585981

    Ok can you post a link to the Enfold install in question?

    #589540

    http://ausidentities.coolwebs.com.au/ – its in a sandpit installation now.

    #590089

    Hey!

    Use this code:

    #top .social_bookmarks li:hover a {
        background: transparent !important;
    }
    #top .social_bookmarks li a:before{
        content: "";
        display: block;
        width: 30px;
        height: 30px;
    
    }
    #top .social_bookmarks li.social_bookmarks_facebook a:before {
        background: url(https://ausidentities.com.au/members/wp-content/themes/np/images/facebook.svg) center center no-repeat;
        background-size: contain;
    }
    
    #top .social_bookmarks li.social_bookmarks_twitter a:before {
        background: url(https://ausidentities.com.au/members/wp-content/themes/np/images/twitter.svg) center center no-repeat;
        background-size: contain;
    }
    
    #top .social_bookmarks li.social_bookmarks_youtube a:before {
        background: url(https://ausidentities.com.au/members/wp-content/themes/np/images/youtube.svg) center center no-repeat;
        background-size: contain;
    }

    Modify and extend as needed.

    Regards,
    Josue

    #590243

    Yes, works like a treat – thank you! http://ausidentities.coolwebs.com.au/
    Had to make some other slight css mods but its working pretty well

    #590245

    Also gonna have to write some css overrides for the social icons in the footer too ;)

    #590250

    Yeah, that code targets both the header and footer social bookmarks.

    Best regards,
    Josue

    #786841

    Ok, so I’m trying this out. I have managed to get a new item in the social media dropdown to add the custom option. I have it set to the custom font that was imported from Fontello. The problem is that it isn’t displaying the correct icon and it isn’t displaying the icon like all other social meida icons….with the round background on hover, etc. (when displayed inline with the main menu).

    #1298955

    Hi,

    I have used this as a template but what i have found is they do not link to where i need them to go, can you help

    #1299265

    Hi outtheboxdigital,

    Please open a new thread and include WordPress admin login details in private so that we can have a closer look at your site. Also please try to explain the problem you are having a bit further.

    Best regards,
    Rikard

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