FA icons next to menu items?

1st Official Post
    Quote from PJK

    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^^

    Quote from Morik
    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?

    Quote from Morik

    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.


    Quote from Morik

    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 + 5.5 ) *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 + 5.5 ) *no.xml* Unofficial Language Packs

    • Official Post
    Quote from SoftCreatR

    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

    Like 1

Participate now!

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

Register Yourself Login