Navigation
Archive / Awesome font in navbar: what am I doing wrong
This is archived content. Visit our new forum.

Tagged: 

  • Author
    Posts
  • October 26, 2016 at 5:15 am #1231218
    bambooinn
    Participant

    Hello X,

    Wanted the shopping cart in the navbar, using renew stack here.

    I tried some of the suggestions in the forum:

    1) add page to menu
    2) change title menu into

    <i class=”x-icon x-icon-user”></i>

    The odd thing is, I have another site that has

    <i class=”x-icon x-icon-home”></i>

    that worked, but not on our current site.. help?

    Wouldlike to have this icon
    http://fontawesome.io/icon/cart-plus/

    For this site
    http://dev.bamboo-inn.nl/shop/

    October 26, 2016 at 5:18 am #1231223
    bambooinn
    Participant

    just FYI: on the LEFT of the search icon (the right one is created by woocommerce/theme x)

    October 26, 2016 at 5:45 am #1231258
    Thai
    Moderator

    Hi There,

    This ticket should help: https://community.theme.co/forums/topic/add-icon-to-menu-item/#post-1034229.

    Regards!

    October 26, 2016 at 6:40 am #1231330
    bambooinn
    Participant

    Hello Thai,

    Well….I tried that before as well. But I did try it again, and it is super strange:

    When I put in:

    It works with:
    <i class=”x-icon x-icon-user” data-x-icon=”” aria-hidden=”true”></i>

    or

    <i class=”x-icon x-icon-sign-in” data-x-icon=”” aria-hidden=”true”></i>

    Both works….

    But if I change the code to:

    But now I put in:
    <i class=”x-icon x-icon-shopping-cart” data-x-icon=”” aria-hidden=”true”></i>

    The ‘previous’ icon is still showing up, even though it says shopping-cart. And in the HTML/inspect item (chrome), it does say this new css (so no cache issues).

    Well… this doesn’t make sense to me at all. Oh … I actually want the awesome font Cart plus, assuming you will recommend me to use:
    <i class=”x-icon x-icon-cart-plus” data-x-icon=”” aria-hidden=”true”></i>

    October 26, 2016 at 7:56 am #1231412
    Joao
    Moderator

    Hi There

    That hapenns because ”” of every icon is different, it is the same for the human mind but not for the computer.

    Access this link : demo.theme.co/integrity-1/shortcodes/icons/ click with your write mouse button and inspect the icons you want to use and copy the full correct code.

    If you don´t know how to do that let us know which icons you need and we will provide you the code.

    Hope that helps

    Joao

    October 26, 2016 at 3:46 pm #1232106
    bambooinn
    Participant

    Hello,

    would like to have: http://fontawesome.io/icon/cart-plus/

    (how do you figure out the “” from the font awesome stock?)

    October 26, 2016 at 9:12 pm #1232497
    Friech
    Moderator

    Hi There,

    You can use this markup:

    <i class="x-icon x-icon-cart-plus" data-x-icon="&#xf217;" ></i>

    Please follow this post about data-x-icon attribute.

    Hope it helps, Cheers!

    October 27, 2016 at 12:50 am #1232682
    bambooinn
    Participant

    ah yes… the Icon unicode… thanks. it worked!

    October 27, 2016 at 1:05 am #1232692
    Friech
    Moderator

    You’re more than welcome, glad we could help.

    Cheers!

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