Search in:
Suggested Search: installation, configuration
Search in:
Suggested Search: installation, configuration

CSS code snipped to put some padding between fontawesome icons and text

Home › Forums › Pro Support › CSS code snipped to put some padding between fontawesome icons and text

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • June 5, 2018 at 6:04 pm #68174
    RESPONSIVE CSS DESIGNRESPONSIVE CSS DESIGN
    Participant

    Hey Peter,

    I’m not that great at CSS, and can’t figure out how to put like 5 pixels of space between the font awesome icon and the text in the menu item.

    Would you give me a snippet that would work?

    Thanks!

    June 5, 2018 at 6:08 pm #68182
    Peter FeatherstonePeter Featherstone
    Participant

    Hi Paul,

    The forum already has an answer almost identical to this below:

    https://responsive.menu/forums/topic/adding-a-small-margin-to-font-icons-near-items-text-in-rtl-websites/

    Instead of using the generic margin, you can instead simply use margin-right instead.

    Hope that helps

    Peter

    June 5, 2018 at 6:17 pm #68181
    RESPONSIVE CSS DESIGNRESPONSIVE CSS DESIGN
    Participant

    Yeah, I found that snippet and it doesn’t work.

    I’m not using glphs so I don’t know if that’s the issue or what.

    June 5, 2018 at 10:01 pm #68180
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Paul,

    The snippet in that post covers both glyphicons and fontawesome icons. Did you make sure to copy the whole snippet?

    What is your site url so I can take a look?

    Peter

    June 6, 2018 at 9:14 am #68179
    Peter FeatherstonePeter Featherstone
    Participant

    Hi Paul,

    I’ve just checked your site and you seem to be using FontAwesome 5 which is different from what my plugin uses.

    In this case, you will need to do something like the below:

    #responsive-menu-pro-container #responsive-menu-pro li.responsive-menu-pro-item a svg {
   margin-right: 15px !important;
}

    Please let me know if that works for you.

    Peter

    June 6, 2018 at 9:36 am #68178
    RESPONSIVE CSS DESIGNRESPONSIVE CSS DESIGN
    Participant

    NICE! Perfect! That did it!

    Thanks so much!

    June 6, 2018 at 9:37 am #68177
    Peter FeatherstonePeter Featherstone
    Participant

    Hey Paul,

    You are more than welcome, I’m glad that worked for you!

    By the way, the next release of my plugin will include an upgrade to Font Awesome 5 so you are already ahead of the game with that CSS snippet 😀

    Peter

    June 6, 2018 at 9:38 am #68176
    RESPONSIVE CSS DESIGNRESPONSIVE CSS DESIGN
    Participant

    Excellent! thanks again!

    June 6, 2018 at 4:28 pm #68175
    Peter FeatherstonePeter Featherstone
    Participant

    🙂

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘CSS code snipped to put some padding between fontawesome icons and text’ is closed to new replies.