FA icons next to menu items?

  • How can I place FontAwesome icons to the left of a menu item?

    That's pretty easy;)


    CSS
    .mainMenu .boxMenu > .boxMenuHasChildren > a::before
        content: "\f107";
        display: block;
        font-family: 'FontAwesome';
        font-size: 14px;
        height: 24px;
        line-height: 24px;
        margin-right: 5px;
        width: 10px;
        }

    and put the icon behind it on "display none"


    Code
    .mainMenu .boxMenu > .boxMenuHasChildren > a::after {
        display: none;
    }

  • Thanks for replying Aze and Hitman . None of the CSS seems to work from the link Are provided, Google translate must be leaving something out. I was trying to place a comment icon next to the word "forum" in my menu and other icons with the other menu items.

  • Code
    .mainMenu .boxMenu > li[data-identifier="com.woltlab.wbb.BoardList"] > a::before {
        font-family: FontAwesome;
        content: "\f0e6";
        margin-right: 5px;
    }

    This should do the trick^^

  • Code
    .mainMenu .boxMenu > li[data-identifier="com.woltlab.wbb.BoardList"] > a::before {
        font-family: FontAwesome;
        content: "\f0e6";
        margin-right: 5px;
    }

    This should do the trick^^

    That code gives me an error.

  • whats the error ?

    I've added this code to the stile undependent css section and it works perfectly, maybe you added it inside another block or missed a bracket?

  • whats the error ?

    I've added this code to the stile undependent css section and it works perfectly, maybe you added it inside another block or missed a bracket?

    This is the error that I get. I added the code to a style that does not have any other additional CSS styling.


  • Works perfectly fine for me, are you shure you added the first line also ?

    I got it to work this time by highlighting the code you provided instead of clicking on the "Copy contents" icon. Thank you, Morik.

  • LogixX and Morik I just get the picture on the forum menu,can you help me so that I get a picture on all menus


    Thanks

    Norwegian language files to (WSC 5.2 + 5.3 and The New WSC 5.4 ) *no.xml* Unofficial Language Packs

  • tunhj1 try this. I'm not sure what the identifier is for Filebase and statistics so the might have to be changed, if you give me a link to your site I can check.


  • LogixX Thanks id for Filbase is

    Code
    .mainMenu .boxMenu > li[data-identifier="com.woltlab.filebase.FileList"] > a::before {
        font-family: FontAwesome;
        content: "\f019";
        margin-right: 5px;
    }

    And statistics are

    Code
    .mainMenu .boxMenu > li[data-identifier="dnd.statistics.menu"] > a::before {
        font-family: FontAwesome;
        content: "\f080";
        margin-right: 5px;
    }

    Norwegian language files to (WSC 5.2 + 5.3 and The New WSC 5.4 ) *no.xml* Unofficial Language Packs

  • After the next WSC update, even the mobile menu is supported :)




    Last but not least: All menus (even custom menus) are supported, not just the main menu.

    • Official Post

    After the next WSC update, even the mobile menu is supported :)

    The gaps between the icons and the text are too narrow, please compare it to the search link at the end of the menu for a good reference.

    Alexander Ebert
    Senior Developer WoltLab® GmbH

  • The gaps between the icons and the text are too narrow, please compare it to the search link at the end of the menu for a good reference.


    Just checked it. We are using a gap of 5px, which is the same as the gap between the text and the dropdown indicator (also in the language chooser).

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!