FA icons next to menu items?

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

    That's pretty easy;)


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

    and put the icon behind it on "display none"


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

  • 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
    1. .mainMenu .boxMenu > li[data-identifier="com.woltlab.wbb.BoardList"] > a::before {
    2.     font-family: FontAwesome;
    3.     content: "\f0e6";
    4.     margin-right: 5px;
    5. }

    This should do the trick^^

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


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


  • 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).