Tagged: , , ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • May 8, 2017 at 6:36 pm #789764
    oiser

    Hi guys,

    I need to update social icons in the menu header, how can I do it? For example I would like to show some icons that are present in fontello/ font awesome by dave gandy: http://fontello.com/

    I’d like to replace the google+ icon in the enfold header with a google+ icon in awesome font. Is it possible?

    Thanks for your help!

    • This topic was modified 6 years, 11 months ago by oiser.
    May 9, 2017 at 5:30 am #789965
    Sarah

    Hey oiser,

    Can you try the steps in our tutorial for adding icon fonts? http://kriesi.at/documentation/enfold/adding-your-own-icon-fonts/

    This article might also be of help to you.

    Let us know if you need further assistance.
    Best regards,
    Sarah

    May 9, 2017 at 11:12 am #790141
    oiser

    Hi Sarah, thank you.

    Until now, there are no problems: I can load the icons that interest me and I’ll see them in the builder. But if I wanted to update the social icons in the header and footer, how can I do it? I load an example in the attached photo.

    Example

    Best regards

    May 9, 2017 at 1:37 pm #790244
    Sarah

    Great! Glad to know you were able to import the icons you want. :)

    To use it in Social Profiles, the second link I gave you has the steps. Here it is again: http://kriesi.at/documentation/enfold/custom-social-icons/

    It says there that you’ll need the icon code. Youcan find this when you’re in the builder. Hover your mouse over the icon you want. For example:
    http://i.imgur.com/8wLH1t6.jpg

    After following the instructions, you should be able to see the icon as one of the choices in Social Profiles. You can then replace your current Google+ icon with the one that you want.

    I hope that was clear and helpful. Please let us know if you need further assistance.

    Best regards,
    Sarah

    May 10, 2017 at 1:33 am #790738
    oiser

    Thank you Sarah, works well now!
    Only one last thing: I cannot change the hover background and text color.
    I follow the instructions and insert this css in css panel:

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

    I replace ICON_NAME with the name with which I renamed it, but nothing happens. Where am I wrong?

    May 10, 2017 at 1:35 am #790740
    Yigit

    Hi,

    Can you please post a link to your website? :)

    Best regards,
    Yigit

    May 10, 2017 at 1:37 am #790742
    oiser

    Hi Yigit,

    For now, unfortunately, I’m just trying in wamp!! :(

    May 10, 2017 at 1:40 am #790743
    Yigit

    Hi,

    Can you please right click on the new icon and click inspect elements and post a screenshot? You can upload your screenshots on imgur.com or Dropbox public folder and post the links here :)

    Best regards,
    Yigit

    May 10, 2017 at 12:40 pm #791029
    oiser

    Hi this are the steps that i follow:

    I loaded the icons in the theme and I take the icons code:

    I reported the icon code in functions.php:

    After I added css code in the quick panel:

    and these are the results:


    In Google+ icon there isn’t hover effect.

    Finally, here is the inspection of the item:

    Thanks for the support!

    • This reply was modified 6 years, 11 months ago by oiser.
    May 10, 2017 at 1:10 pm #791055
    Sarah

    Hi oiser,

    Please use this code instead:

    #top #wrap_all .av-social-link-Google\+:hover a{
  color:#fff;
  background-color:#9fae37;
}

    For your reference, the plus sign has a special function in CSS. So we have to tell the browser that the plus sign is part of the class name, and we do it by using a backslash. https://mothereff.in/css-escapes#0frme_150+1

    Best regards,
    Sarah

    May 10, 2017 at 1:56 pm #791074
    oiser

    Perfect! Now works very well!!

    Thanks a lot for the great support!

    Best regards!

    May 10, 2017 at 2:08 pm #791087
    Sarah

    You’re welcome!

    We’ll close this thread now. If you have any other questions or issues, feel free to post them here on the forum and we will gladly try to help you.

    And we’d appreciate it if you can take a moment to review our theme if you haven’t already. https://themeforest.net/downloads

    Thank you for using Enfold!

    Sarah

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Update header social icons’ is closed to new replies.