Navigation
Archive / Footer Social Icon Manipulation
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • January 20, 2017 at 7:45 am #1338322
    rinzin
    Participant

    Hi, I’ve been trying to make my own custom social section in the footer of my page. However, for whatever reason, when I make the changes in the code here the icons don’t change from the social icons. I imagine this is due to it being in the custom-social class or social icons class. Anyways, please let me know how to turn the icons into what code I have below. Also I’ve attached a screenshot of the icons as they look now.

    <div class="custom-social"> <a class="socialicons" href="http://facebook.com/akosmusic"><i class="x-icon x-icon-facebook-square" data-x-icon=""></i></a> 
<a class="footerlink" href="http://youtube.com/akosmusic"><i class="x-icon x-icon-youtube-square" data-x-icon=""></i></a>
<a class="footerlink" href="http://twitter.com/akosmusic"><i class="x-icon x-icon-mail-forward" data-x-icon=""></i></a> 
<a class="footerlink" href="http://pinterest.com/akosmusic"><i class="x-icon x-icon-map-marker" data-x-icon=""></i></a> <a class="footerlink" href="http://instagram.com/akosmusic"><i class="x-icon x-icon-mobile" data-x-icon=""></i></a> </div>
    January 20, 2017 at 11:08 am #1338578
    Jade
    Moderator

    Hi there,

    Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

    January 20, 2017 at 2:30 pm #1338859
    rinzin
    Participant
    This reply has been marked as private.
    January 20, 2017 at 7:10 pm #1339204
    Rad
    Moderator

    Hi there,

    It’s because of this, data-x-icon="", it’s the one that decides which icon should be displayed. The format is like this

    data-x-icon="ICON_CODE"

    And you can find all icon codes here http://fontawesome.io/cheatsheet/

    Example, data-x-icon="&#xf166;"

    It only appears square since icon codes are also ASCII characters.

    Thanks!

  • Author
    Posts
  • <script> jQuery(function($){ $("#no-reply-1338322 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>