Okay
  Public Ticket #3683598
Social media icon
Open

Comments

  • 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,736
    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.

  • 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,802
    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,

  • 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,802
    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,