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.

  • 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 WSC 5.4 + 5.5 and The New 6.0 ) *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 WSC 5.4 + 5.5 and The New 6.0 ) *no.xml* Unofficial Language Packs

  • 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!