Space between icon and text in menu

  • Resolved adsler26

    (@adsler26)


    6 years, 2 months ago

    Hi Guys,

    I’m looking for some CSS or something to put a space between my icons and text in my main menu on my front page.

    I got around it by putting a (-) sign next to the text, so it takes the text a bit away from the icon, but don’t like the way it looks.

    Is there a piece of custom CSS anyone knows of to put white space between the icon and text, just in the menu? I just need a little bit so it’s differenciable (if that’s a word)

    I’ve tried:

    td a + a {
    padding-left: 3em;
    }

    (in custom CSS) – nothing.

    Also tried:

    “fa-fw” (in menu CSS class)

    but that moves the icon and the text to the middle of the page.

    Cheers,

    Nico
    Adsler.co.uk.

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Plugin Author mlwilkerson

    (@mlwilkerson)

    Hello,

    I don’t see any icons next to items in a main menu on that page currently, so I assume that you’ve changed it since posting this.

    Yes, padding is one way to get the effect you want. Margin is also a possibility. The exact code for how to apply that would depend on how your HTML is marked up. The property padding-left: 3em; should work fine, but only if your CSS selector (td a + a) is selecting the correct element. I suspect that’s where your problem lies.

    Once you’ve got a CSS selector that successfully selects the element you wish to style with padding-left: 3em; I think you’ll find that it works as you expect.

    I’m going to close this issue since it pertains not so much to this plugin, but to CSS usage. StackOverflow.com is often a better place to get help with some of those techniques.

Viewing 1 replies (of 1 total)
  • The topic ‘Space between icon and text in menu’ is closed to new replies.