Okay
  Public Ticket #3683598
Social media icon
Open

Comments

  •  1
    joeryancom started the conversation

    I just installed the latest version of Salient, and the social media icons for Spotify, Apple Music, and TikTok are not rendering in the footer or the header. In the footer, they are just circles with no log in the middle. in the header they are blank, but appear when i do a rolover with the mouse. Any way to fix this?

    Facebook, Instagram, YouTube, and Twitter work fine.

  •  1,832
    Judith replied

    Hi Joeryancom,

    Thanks for writing to us.

    Try installing the Font Awesome plugin and see whether that would help fix the issues.

    Please let us know how this goes.

  •  1
    joeryancom replied

    It's installed; now what? How about some instructions?

    What code do I place where?

    Some render correctly, and others do not.   How can the social media icons appear correctly in the header and footer? Why do I need an additional plugin to get this working?


  •  2,933
    Andrew replied

    Hi Joeryan,

    Thank you for getting back to us.

    Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):

    .ascend .mfp-iframe-holder .mfp-close, .ascend .mfp-image-holder .mfp-close, .fa.fa-angle-down, 
    .fa.fa-angle-left, .fa.fa-angle-right, .fa.fa-angle-up, .fa.fa-facebook, .fa.fa-linkedin, 
    .fa.fa-minus-sign, .fa.fa-ok-sign, .fa.fa-pinterest, .fa.fa-plus-sign, .fa.fa-twitter, 
    .icon-be, .icon-button-arrow, .icon-salient-apple-music, .icon-salient-artstation, .icon-salient-back-to-all, 
    .icon-salient-cart, .icon-salient-check, .icon-salient-discord, .icon-salient-down-arrow, 
    .icon-salient-down-arrow-thin, .icon-salient-facebook, .icon-salient-facebook-messenger, .icon-salient-heart, 
    .icon-salient-heart-2, .icon-salient-houzz, .icon-salient-left-arrow, .icon-salient-left-arrow-thin, 
    .icon-salient-m-clock, .icon-salient-m-close, .icon-salient-m-eye, .icon-salient-m-social-alt, .icon-salient-m-user, 
    .icon-salient-mastodon, .icon-salient-medium, .icon-salient-patreon, .icon-salient-pencil, .icon-salient-pinterest, 
    .icon-salient-plus, .icon-salient-right-arrow, .icon-salient-right-arrow-thin, .icon-salient-right-line, 
    .icon-salient-search, .icon-salient-spotify, .icon-salient-thin-line, .icon-salient-threads, .icon-salient-tiktok, 
    .icon-salient-trustpilot, .icon-salient-twitch, .icon-salient-twitter, .icon-salient-woo-zoom-icon, .icon-salient-x, 
    .icon-salient-x-twitter, .icon-soundcloud, .icon-vimeo, .material .comment-list .reply a:before, 
    .mejs-controls .mejs-button button, .mfp-iframe-holder .mfp-close, .mfp-image-holder .mfp-close, .salient-page-submenu-icon, .video-play-button, i.fa.fa-houzz {
      font-family: 'icomoon' !important;
    }
    

    Try this and let us know how it goes.

    Thanks,

  •  1
    joeryancom replied

    I had to edit the last two lines (enclosed below with the edits) to eliminate the errors

    location Sailent -> General Settings -> CSS/Script Related -> Custom CSS

    .mejs-controls .mejs-button button, .mfp-iframe-holder .mfp-close, .mfp-image-holder .mfp-close, .salient-page-submenu-icon, .video-play-button, .fa.fa-houzz {
      font-family: 'icomoon';

    I am getting the same results:

    I just installed the latest version of Salient, and the social media icons for Spotify, Apple Music, and TikTok are not rendering in the footer or the header. In the footer, they are just circles with no log in the middle. In the header, they are blank, but they appear when I do a rollover with the mouse.


    How is it that some render correctly and others do not?


  •  2,933
    Andrew replied

    Hi Joe,

    Thank you for getting back to us.

    It could be a conflict with one of your installed plugins that is overriding the icomoon font that displays the icons.

    You need to add the CSS as I shared it for this to work. 

    Try this and let us know how it goes.

    Thanks,

  •  1
    joeryancom replied

    I've turned off all plugins and tried the code you sent me, and nothing worked. I had to hack this file to get it to work

    wp-content/themes/salient/nectar/helpers/header.php


  •  1,832
    Judith replied

    Hi there,

    Thanks for writing back.

    We appreciate your taking the initiative to resolve this on your own.

    Should you have any further questions or encounter any difficulties along the way, please don't hesitate to reach out. 

    Best regards,


  • L Hoogendoorn replied

    Beste mensen van Team Nectar, 

    Ik heb hetzelfde probleem als Joeryancom. De social media icoontjes op mijn website met jullie thema worden weergegeven, maar zijn niet vindbaar om aan te passen. Zelfs niet door een medewerker van mijndomein.nl en niet door mijn content specialiste. Als je over de icoontjes gaat met de muis die wel zichtbaar zijn, dan zie je wit rondje met een rode streep er doorheen. Je kunt in de header dus geen social media icoontjes toevoegen of verwijderen. 

    Vervolgens heb ik de onnodige plugins uitgezet en de plugins laten staan die wel nodig zijn voor jullie thema. Werkt ook niet. Ik ben geen specialist en kan dus niet zelf zoals Joerycom voor een oplossing zorgen. Kortom, ik stel verdere instructies op prijs liever jullie dit in het thema op willen oplossen, dat lijkt mij het meest voor de hand liggend.  

    Vriendelijke groeten, L Hoogendoorn

  •  2,933
    Andrew replied

    Hi there,

    Thank you for getting in touch.

    Please share your site URL so we can check this out an advise.

    We look forward to your reply.

    Thanks,

  • L Hoogendoorn replied

    Goedemorgen Andrew, 

    Het is https://lindenhofjuristen.nl/. En het gaat dus om de icoontjes rechtsbovenin de header. Alvast bedankt voor uw hulp.


  •  2,933
    Andrew replied

    Hi again,

    Thank you for getting back to us.

    Could you share a screenshot or a recording of what you're seeing from your end? The social icons seem to be appearing as they should.

    9491069015.png

    To remove/change the social icons, you need to header over to Salient > Header Navigation > Layout and Content Related and select the social icons you want.

    You can change the URLs of your social icons in the Salient > Social Media settings.

    We look forward to your reply.

    Thanks,

  • L Hoogendoorn replied

    Dag Andrew, bedankt voor de instructies, nu werkt het om aanpassingen te doen! 

    Groeten, L Hoogendoorn

  •  2,933
    Andrew replied

    Hi Joe,

    Thank you for getting back to us.

    I'm happy that we could assist you! If you haven't already, please consider sharing your experience by leaving a review on ThemeForest. Your feedback is valuable to us and greatly appreciated!

    Regards,