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

Participate now!

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