Navigation
Archive / icon size and color
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • August 31, 2016 at 9:56 am #1155206
    JP
    Participant

    hi

    i am trying to change of the icons in my footer

    myeternalbeauty.com

    ‘
    <p>© Copyright 2016 My Eternal Beauty [x_icon type=”cc-mastercard” style=”font-size: 30px; color: #ffffff;”]</p>
    ‘

    this does not seem to do anything. any idea why?

    thanks

    August 31, 2016 at 10:17 am #1155254
    Rupok
    Member

    Hi there,

    Thanks for writing in! It seems working fine as I can see the icon – http://prntscr.com/ccjqir

    Would you check again clearing your cache?

    Cheers!

    September 1, 2016 at 4:38 am #1156574
    JP
    Participant
    This reply has been marked as private.
    September 1, 2016 at 5:09 am #1156615
    Christian
    Moderator

    Hey there,

    The Customizer does not accept shortcodes for security reasons. Please remove them then add the code below in your Appearance > Customize > Custom > Global CSS

    .x-colophon-content .x-icon {
    font-size: 30px
}

    Hope that helps. 🙂

    September 1, 2016 at 5:15 am #1156620
    JP
    Participant

    Ah that explains it

    but how to i place icon into footer if i can’t use shortcode?

    and I only want this to apply to certain icons not all. (just the ones in the footer really)

    Thank you!

    September 1, 2016 at 5:57 am #1156659
    Paul R
    Moderator

    Hi,

    Please change your code with this.

    &copy; Copyright 2016 My Eternal Beauty <i class="x-icon x-icon-cc-mastercard" data-x-icon=&#034;" aria-hidden="true"></i>
    <i class="x-icon x-icon-cc-visa" data-x-icon="&#xf1f0;" aria-hidden="true"></i>
    <i class="x-icon x-icon-cc-paypal" data-x-icon="&#xf1ed;" aria-hidden="true"></i>

    For your reference plesae refer to the link below

    http://fontawesome.io/cheatsheet/

    Hope that helps.

    September 2, 2016 at 5:21 am #1158269
    JP
    Participant

    OK thanks.

    I used this dislay method and moved icons to footer.

    I can resize them now which is great but for some reason it will not display all icons.

    i.e. I have 4 credit cards but only 3 display and I have 3 social icons but only 2 display ??

    <p>We accept the following payment methods:<br>
    <i class=”x-icon x-icon-cc-paypal” data-x-icon=”” aria-hidden=”true” style=”font-size:35px;”></i>

    <i class=”x-icon x-icon-cc-mastercard” data-x-icon=”” aria-hidden=”true” style=”font-size:35px;”></i>

    <i class=”x-icon x-icon-cc-visa” data-x-icon=”” aria-hidden=”true” style=”font-size:35px;”></i>

    <i class=”x-icon x-icon-cc-amex” data-x-icon=”” aria-hidden=”true” style=”font-size:35px;”></i></p>

    <p>Follow us on Social Media:<br>
    <i class=”x-icon x-icon-twitter-square” data-x-icon=”” aria-hidden=”true” style=”font-size:35px;”></i>

    <i class=”x-icon x-icon-facebook-square” data-x-icon=”” aria-hidden=”true” style=”font-size:35px;”></i>

    <i class=”x-icon x-icon-pinterest-square” data-x-icon=”” aria-hidden=”true” style=”font-size:35px;”></i>

    </p>

    myeternalbeauty.com right footer

    September 2, 2016 at 7:31 am #1158393
    Friech
    Moderator

    Hi There,

    In that case you need the icon unicode to supply on the data-x-icon attribute. Look for desired icon unicode here.

    The complete code should be like this:
    <i class="x-icon x-icon-heart" data-x-icon="&#xf004;" aria-hidden="true" style="font-size:35px;"></i>

    Notice the f004, that is the icon unicode.

    Hope it helps, Cheers!

    September 5, 2016 at 4:29 am #1161366
    JP
    Participant

    hi – not sure why my code showed a square but I am using the unicode already

    for some reason some of the icons show but not all of them.

    if you look into footer 4 you will see 2 social icons. but there are thee in the code. it just seems to only show 2 no matter how many i place in there…

    September 5, 2016 at 4:57 am #1161404
    Christopher
    Moderator

    Hi there,

    Upon checking your code, there were some pretty quotes instead of normal quotes which were causing the issue. I went ahead and fixed it for you.

    Hope it helps.

    September 5, 2016 at 5:11 am #1161427
    JP
    Participant

    thanks!

    September 5, 2016 at 5:23 am #1161441
    Christopher
    Moderator

    You’re welcome.

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