Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 26, 2018 at 10:34 am #947170
    patricknh

    Hi,
    My site has two social media link icons to the right of the menu (from enfold 2017 demo layout). How do I
    1. Change those icons and their sizes
    2. Add another icon that is an email (mailto) link?
    Thank you

    April 26, 2018 at 12:03 pm #947221
    Mike

    Hey patricknh,
    To add a email icon, go to Enfold Theme Options > Social Profiles > Your social profiles and click the “+” below one of the current icons, then select “Special: Email Icon” and add your “mailto” and email address, or a link to your contact page.
    2018-04-26_055009
    To change the size of the icon, try this code in the General Styling > Quick CSS field:

    #top #header .social_bookmarks li a {
    font-size: 20px !important; 
}

    adjust to suit.

    Best regards,
    Mike

    April 26, 2018 at 3:47 pm #947323
    patricknh

    Thanks Mike, didnt see the email on that menu as I didnt scroll down that list to the bottom and it was lurking out of sight! The size code is working too, thanks.

    Any way to switch the icons in use like with the buttons, I have a custom set uploaded and its working on the site. I would like to change the youtube from the teeny text to the play button version.

    Cheers

    April 27, 2018 at 3:25 am #947565
    Mike

    Hi,
    To change the social icons there are a couple of choices, one would be to upload a new Fontello icons, please see:
    How to Add Custom Social Icons to the Theme Options
    The other choice is to use css to change the icon with your image, which sounds like what you want to do. Please see the link above but scroll down near the bottom.

    Best regards,
    Mike

    April 27, 2018 at 7:06 am #947670
    patricknh

    Hi Mike,

    Thanks. The icons are already created in fontello and then imported into enfold and they do work – they are at the bottom in elements like buttons which give you a list of icons to choose from. However the ones in the “Theme Options” don’t allow you to choose an icon – just youtube or whatever from a menu list, the actual icon itself resulting from the choice you make seems to be automatically applied by the theme. This is where I would like to change the icon (ie in this particula instance they are in the main menu to the right alá the 2017 demo header).

    Cheers

    April 27, 2018 at 11:06 am #947823
    Mike

    Hi,
    Sorry you can’t switch the social icons like that, you need to use the methods above. But since you downloaded your custom icons from
    fontello you can get the character codes in that zip.
    If you link to the file you are using via dropbox I can help you. Hopefully you are using a child theme so your changes will not be lost with future theme updates Read about it & Get it here

    Best regards,
    Mike

    April 27, 2018 at 11:23 am #947844
    patricknh

    Hi Mike,
    Yes I am using a child theme. Which file do you want me to link?
    I have been trying that function code that you linked to but not getting it right.
    From the fontello zip:
    1. the icon character is \f16a and it is called icon-youtube-play
    2. I named the font ‘coastalicon’ and it appears in button choices as that (Font: coatsalicon) underneath the “Font: entypo-fontello” guys in enfold choice box
    3. I want to swop it for the youtube icon that the theme defaults to (old style youtube with teeny tiny text)
    I am not sure how to integrate this into that function code, I am not very good with php and js! Im more a front end person with medium css skill.
    Thanks

    ***addition***

    I will put function code below that I have used.
    I have now got something displaying there but it looks like a pen, not the youtube! I havent included a pen in the fontello font. Also the little background circle doesnt appear on rollover even though I used the css from your link? The icon goes from white to pink on rollover with this css:

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

    • This reply was modified 6 years, 8 months ago by patricknh. Reason: added dropbox link
    April 28, 2018 at 11:26 am #948317
    patricknh

    Hi, I still cannot solve this problem with unknown icon p(pen) and no background on rollover?

    April 28, 2018 at 1:40 pm #948354
    Mike

    Hi,
    Thank you for uploading the file, you were very close with your code, try this code and re-select your icon:

    function avia_add_custom_icon($icons) {
$icons['youtube-play']	= array( 'font' =>'coastalicon', 'icon' => 'uf16a');
return $icons;
}
add_filter('avf_default_icons','avia_add_custom_icon', 10, 1);

function avia_add_custom_social_icon($icons) {
$icons['YoutubePlay'] = 'youtube-play';
return $icons;
}
add_filter('avf_social_icons_options','avia_add_custom_social_icon', 10, 1);

    To add hover background color, please try this code in the General Styling > Quick CSS field:

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

    Best regards,
    Mike

    April 28, 2018 at 3:42 pm #948378
    patricknh

    Thank you Mike! That nailed it :).

    Still not sure how you figured to use the ‘uf16a’ for the icon code? How does that work from the fontello file?

    April 28, 2018 at 4:06 pm #948389
    Mike

    Hi,
    The “\” is converted to “u” in the code.
    I thought it was explained it the documentation link above, but while shown in the example code, it’s not expressed in the text. Sorry, we are updating the documentation and I’ll check the new version for this.

    Best regards,
    Mike

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