How can I place FontAwesome icons to the left of a menu item?
FA icons next to menu items?
-
- WSC 3.1.x
-
LogixX -
1. Januar 2019 um 19:34
-
-
-
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"
-
-
-
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.
Code
Alles anzeigenOriginal Error Error Type: Exception Error Message: parse error: failed at ` font-family: FontAwesome; ` line: 93 File: */lib/system/style/scssphp/src/Parser.php (2142) Stack Trace: #0 */lib/system/style/scssphp/src/Parser.php (145): Leafo\ScssPhp\Parser->throwParseError() #1 */lib/system/style/scssphp/src/Compiler.php (160): Leafo\ScssPhp\Parser->parse('@import "style/bootstrap/reset.scss"; @import "style/bootstrap/mixin.scss"; @import "style/bootstrap/mixin/apiVersion.scss"; @import "style/bootstrap/mixin/box.scss"; @import "style/bootstrap/mixin/dropdownMenu.scss"; @import "style/bootstrap/mixin/font.scss"; @import "style/bootstrap/mixin/hacks.scss"; @import "style/bootstrap/mixin/input.scss"; @import "style/bootstrap/mixin/list.scss"; @import "style/bootstrap/mixin/mediaQuery.scss"; @import "style/bbcode/code.scss"; @import "style/bbcode/inlineCode.scss"; @import "style/bbcode/media.scss"; @import "style/bbcode/quote.scss"; @import "style/bbcode/spoiler.scss"; @import "style/bbcode/userMention.scss"; @import "style/bbcode/video.scss"; @import "style/element/dl.scss"; @import "style/element/list.scss"; @import "style/icon/icon.scss"; @import "style/layout/box.scss"; @import "style/layout/containerList.scss"; @import "style/layout/content.scss"; @import "style/layout/form.scss"; @import "style/layout/global.scss"; @import "style/layout/grid.scss"; @import "style/layout/layout.scss"; @import "style/layout/pageFooter.scss"; @import "style/layout/pageHeader.scss"; @import "style/layout/pageNavigation.scss"; @import "style/layout/print.scss"; @import "style/layout/sidebar.scss"; @import "style/mejs/mediaelement.scss"; @import "style/mejs/overrides.scss"; @import "style/noexcept/tmdb.scss"; @import "style/ui/acl.scss"; @import "style/ui/adLocation.scss"; @import "style/ui/alert.scss"; @import "style/ui/article.scss"; @import "style/ui/attachment.scss"; @import "style/ui/avatar.scss"; @import "style/ui/badge.scss"; @import "style/ui/breadcrumb.scss"; @import "style/ui/button.scss"; @import "style/ui/buttonGroupFlexible.scss"; @import "style/ui/colorPicker.scss"; @import "style/ui/comment.scss"; @import "style/ui/datePicker.scss"; @import "style/ui/dialog.scss"; @import "style/ui/dropdown.scss"; @import "style/ui/dropdownInteractive.scss"; @import "style/ui/fontAwesome.scss"; @import "style/ui/googleMap.scss"; @import "style/ui/headerContent.scss"; @import "style/ui/imageViewer.scss"; @import "style/ui/itemListInput.scss"; @import "style/ui/label.scss"; @import "style/ui/like.scss"; @import "style/ui/listSortable.scss"; @import "style/ui/listStructured.scss"; @import "style/ui/media.scss"; @import "style/ui/menuMobile.scss"; @import "style/ui/message.scss"; @import "style/ui/messageEditHistory.scss"; @import "style/ui/messageGroup.scss"; @import "style/ui/pageAction.scss"; @import "style/ui/pagination.scss"; @import "style/ui/perfectScrollbar.scss"; @import "style/ui/poll.scss"; @import "style/ui/popover.scss"; @import "style/ui/recaptcha.scss"; @import "style/ui/redactor.scss"; @import "style/ui/scrollableCheckboxList.scss"; @import "style/ui/search.scss"; @import "style/ui/shareButtons.scss"; @import "style/ui/slideshow.scss"; @import "style/ui/tabMenu.scss"; @import "style/ui/tabMenuMessage.scss"; @import "style/ui/tableSortable.scss"; @import "style/ui/tabularBox.scss"; @import "style/ui/tooltip.scss"; @import "style/ui/trophy.scss"; @import "style/ui/userIgnore.scss"; @import "style/ui/userLogin.scss"; @import "style/ui/userProfile.scss"; @import "style/ui/wsc31.scss"; @import "style/conversation.scss"; @import "forum/style/wbb.scss"; @import "style/shoutbox.scss"; @import "style/mediaprovider.scss"; @import "forum/style/noexcept.threadstarter.scss"; .mainMenu .boxMenu > li[data-identifier="com.woltlab.wbb.BoardList"] > a::before { font-family: FontAwesome; content: "\\f0e6"; margin-right: 5px; } .wbbBoardIcon4.fa-folder-open-o:before, .wbbBoardIcon4.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon4.fa-folder-open:before, .wbbBoardIcon4.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon5.fa-folder-open-o:before, .wbbBoardIcon5.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon5.fa-folder-open:before, .wbbBoardIcon5.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon7.fa-folder-open-o:before, .wbbBoardIcon7.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon7.fa-folder-open:before, .wbbBoardIcon7.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon8.fa-folder-open-o:before, .wbbBoardIcon8.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon8.fa-folder-open:before, .wbbBoardIcon8.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon9.fa-folder-open-o:before, .wbbBoardIcon9.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon9.fa-folder-open:before, .wbbBoardIcon9.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon12.fa-folder-open-o:before, .wbbBoardIcon12.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon12.fa-folder-open:before, .wbbBoardIcon12.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon13.fa-folder-open-o:before, .wbbBoardIcon13.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon13.fa-folder-open:before, .wbbBoardIcon13.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon11.fa-folder-open-o:before, .wbbBoardIcon11.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon11.fa-folder-open:before, .wbbBoardIcon11.fa-folder:before { content: $fa-var-comments-o; } ') #2 */lib/system/style/StyleCompiler.class.php (357): Leafo\ScssPhp\Compiler->compile('@import "style/bootstrap/reset.scss"; @import "style/bootstrap/mixin.scss"; @import "style/bootstrap/mixin/apiVersion.scss"; @import "style/bootstrap/mixin/box.scss"; @import "style/bootstrap/mixin/dropdownMenu.scss"; @import "style/bootstrap/mixin/font.scss"; @import "style/bootstrap/mixin/hacks.scss"; @import "style/bootstrap/mixin/input.scss"; @import "style/bootstrap/mixin/list.scss"; @import "style/bootstrap/mixin/mediaQuery.scss"; @import "style/bbcode/code.scss"; @import "style/bbcode/inlineCode.scss"; @import "style/bbcode/media.scss"; @import "style/bbcode/quote.scss"; @import "style/bbcode/spoiler.scss"; @import "style/bbcode/userMention.scss"; @import "style/bbcode/video.scss"; @import "style/element/dl.scss"; @import "style/element/list.scss"; @import "style/icon/icon.scss"; @import "style/layout/box.scss"; @import "style/layout/containerList.scss"; @import "style/layout/content.scss"; @import "style/layout/form.scss"; @import "style/layout/global.scss"; @import "style/layout/grid.scss"; @import "style/layout/layout.scss"; @import "style/layout/pageFooter.scss"; @import "style/layout/pageHeader.scss"; @import "style/layout/pageNavigation.scss"; @import "style/layout/print.scss"; @import "style/layout/sidebar.scss"; @import "style/mejs/mediaelement.scss"; @import "style/mejs/overrides.scss"; @import "style/noexcept/tmdb.scss"; @import "style/ui/acl.scss"; @import "style/ui/adLocation.scss"; @import "style/ui/alert.scss"; @import "style/ui/article.scss"; @import "style/ui/attachment.scss"; @import "style/ui/avatar.scss"; @import "style/ui/badge.scss"; @import "style/ui/breadcrumb.scss"; @import "style/ui/button.scss"; @import "style/ui/buttonGroupFlexible.scss"; @import "style/ui/colorPicker.scss"; @import "style/ui/comment.scss"; @import "style/ui/datePicker.scss"; @import "style/ui/dialog.scss"; @import "style/ui/dropdown.scss"; @import "style/ui/dropdownInteractive.scss"; @import "style/ui/fontAwesome.scss"; @import "style/ui/googleMap.scss"; @import "style/ui/headerContent.scss"; @import "style/ui/imageViewer.scss"; @import "style/ui/itemListInput.scss"; @import "style/ui/label.scss"; @import "style/ui/like.scss"; @import "style/ui/listSortable.scss"; @import "style/ui/listStructured.scss"; @import "style/ui/media.scss"; @import "style/ui/menuMobile.scss"; @import "style/ui/message.scss"; @import "style/ui/messageEditHistory.scss"; @import "style/ui/messageGroup.scss"; @import "style/ui/pageAction.scss"; @import "style/ui/pagination.scss"; @import "style/ui/perfectScrollbar.scss"; @import "style/ui/poll.scss"; @import "style/ui/popover.scss"; @import "style/ui/recaptcha.scss"; @import "style/ui/redactor.scss"; @import "style/ui/scrollableCheckboxList.scss"; @import "style/ui/search.scss"; @import "style/ui/shareButtons.scss"; @import "style/ui/slideshow.scss"; @import "style/ui/tabMenu.scss"; @import "style/ui/tabMenuMessage.scss"; @import "style/ui/tableSortable.scss"; @import "style/ui/tabularBox.scss"; @import "style/ui/tooltip.scss"; @import "style/ui/trophy.scss"; @import "style/ui/userIgnore.scss"; @import "style/ui/userLogin.scss"; @import "style/ui/userProfile.scss"; @import "style/ui/wsc31.scss"; @import "style/conversation.scss"; @import "forum/style/wbb.scss"; @import "style/shoutbox.scss"; @import "style/mediaprovider.scss"; @import "forum/style/noexcept.threadstarter.scss"; .mainMenu .boxMenu > li[data-identifier="com.woltlab.wbb.BoardList"] > a::before { font-family: FontAwesome; content: "\\f0e6"; margin-right: 5px; } .wbbBoardIcon4.fa-folder-open-o:before, .wbbBoardIcon4.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon4.fa-folder-open:before, .wbbBoardIcon4.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon5.fa-folder-open-o:before, .wbbBoardIcon5.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon5.fa-folder-open:before, .wbbBoardIcon5.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon7.fa-folder-open-o:before, .wbbBoardIcon7.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon7.fa-folder-open:before, .wbbBoardIcon7.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon8.fa-folder-open-o:before, .wbbBoardIcon8.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon8.fa-folder-open:before, .wbbBoardIcon8.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon9.fa-folder-open-o:before, .wbbBoardIcon9.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon9.fa-folder-open:before, .wbbBoardIcon9.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon12.fa-folder-open-o:before, .wbbBoardIcon12.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon12.fa-folder-open:before, .wbbBoardIcon12.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon13.fa-folder-open-o:before, .wbbBoardIcon13.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon13.fa-folder-open:before, .wbbBoardIcon13.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon11.fa-folder-open-o:before, .wbbBoardIcon11.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon11.fa-folder-open:before, .wbbBoardIcon11.fa-folder:before { content: $fa-var-comments-o; } ') #3 */lib/system/style/StyleCompiler.class.php (132): wcf\system\style\StyleCompiler->compileStylesheet('*/style/style-1', [ 81 items ], [ 147 items ], '.mainMenu .boxMenu > li[data-identifier="com.woltlab.wbb.BoardList"] > a::before { font-family: FontAwesome; content: "\\f0e6"; margin-right: 5px; } .wbbBoardIcon4.fa-folder-open-o:before, .wbbBoardIcon4.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon4.fa-folder-open:before, .wbbBoardIcon4.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon5.fa-folder-open-o:before, .wbbBoardIcon5.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon5.fa-folder-open:before, .wbbBoardIcon5.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon7.fa-folder-open-o:before, .wbbBoardIcon7.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon7.fa-folder-open:before, .wbbBoardIcon7.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon8.fa-folder-open-o:before, .wbbBoardIcon8.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon8.fa-folder-open:before, .wbbBoardIcon8.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon9.fa-folder-open-o:before, .wbbBoardIcon9.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon9.fa-folder-open:before, .wbbBoardIcon9.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon12.fa-folder-open-o:before, .wbbBoardIcon12.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon12.fa-folder-open:before, .wbbBoardIcon12.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon13.fa-folder-open-o:before, .wbbBoardIcon13.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon13.fa-folder-open:before, .wbbBoardIcon13.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon11.fa-folder-open-o:before, .wbbBoardIcon11.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon11.fa-folder-open:before, .wbbBoardIcon11.fa-folder:before { content: $fa-var-comments-o; } ', Closure) #4 */lib/system/style/StyleHandler.class.php (140): wcf\system\style\StyleCompiler->compile(wcf\data\style\Style) #5 */templates/compiled/0_wcf_1_cms.php (122): wcf\system\style\StyleHandler->getStylesheet() #6 */lib/system/template/TemplateEngine.class.php (321): include('*/templates/compiled/0_wcf_1_cms.php') #7 */lib/page/AbstractPage.class.php (323): wcf\system\template\TemplateEngine->display('cms', 'wcf') #8 */lib/page/AbstractPage.class.php (114): wcf\page\AbstractPage->show() #9 */lib/system/request/Request.class.php (83): wcf\page\AbstractPage->__run() #10 */lib/system/request/RequestHandler.class.php (96): wcf\system\request\Request->execute() #11 */index.php (9): wcf\system\request\RequestHandler->handle('wcf')
Code
Alles anzeigenFinal Error Error Type: wcf\system\exception\SystemException Error Message: Could not compile SCSS: parse error: failed at ` font-family: FontAwesome; ` line: 93 File: */lib/system/style/StyleCompiler.class.php (360) Stack Trace: #0 */lib/system/style/StyleCompiler.class.php (132): wcf\system\style\StyleCompiler->compileStylesheet('*/style/style-1', [ 81 items ], [ 147 items ], '.mainMenu .boxMenu > li[data-identifier="com.woltlab.wbb.BoardList"] > a::before { font-family: FontAwesome; content: "\\f0e6"; margin-right: 5px; } .wbbBoardIcon4.fa-folder-open-o:before, .wbbBoardIcon4.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon4.fa-folder-open:before, .wbbBoardIcon4.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon5.fa-folder-open-o:before, .wbbBoardIcon5.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon5.fa-folder-open:before, .wbbBoardIcon5.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon7.fa-folder-open-o:before, .wbbBoardIcon7.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon7.fa-folder-open:before, .wbbBoardIcon7.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon8.fa-folder-open-o:before, .wbbBoardIcon8.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon8.fa-folder-open:before, .wbbBoardIcon8.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon9.fa-folder-open-o:before, .wbbBoardIcon9.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon9.fa-folder-open:before, .wbbBoardIcon9.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon12.fa-folder-open-o:before, .wbbBoardIcon12.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon12.fa-folder-open:before, .wbbBoardIcon12.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon13.fa-folder-open-o:before, .wbbBoardIcon13.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon13.fa-folder-open:before, .wbbBoardIcon13.fa-folder:before { content: $fa-var-comments-o; } .wbbBoardIcon11.fa-folder-open-o:before, .wbbBoardIcon11.fa-folder-o:before { content: $fa-var-comments-o; } .wbbBoardIcon11.fa-folder-open:before, .wbbBoardIcon11.fa-folder:before { content: $fa-var-comments-o; } ', Closure) #1 */lib/system/style/StyleHandler.class.php (140): wcf\system\style\StyleCompiler->compile(wcf\data\style\Style) #2 */templates/compiled/0_wcf_1_cms.php (122): wcf\system\style\StyleHandler->getStylesheet() #3 */lib/system/template/TemplateEngine.class.php (321): include('*/templates/compiled/0_wcf_1_cms.php') #4 */lib/page/AbstractPage.class.php (323): wcf\system\template\TemplateEngine->display('cms', 'wcf') #5 */lib/page/AbstractPage.class.php (114): wcf\page\AbstractPage->show() #6 */lib/system/request/Request.class.php (83): wcf\page\AbstractPage->__run() #7 */lib/system/request/RequestHandler.class.php (96): wcf\system\request\Request->execute() #8 */index.php (9): wcf\system\request\RequestHandler->handle('wcf')
-
-
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.
-
Interesting, never had that problem^^
But good to know that it works now as expected
-
-
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.
Code
Alles anzeigen.mainMenu .boxMenu > li[data-identifier="com.woltlab.wbb.BoardList"] > a::before { font-family: FontAwesome; content: "\f0e6"; margin-right: 5px; } .mainMenu .boxMenu > li[data-identifier="com.woltlab.wcf.Dashboard"] > a::before { font-family: FontAwesome; content: "\f015"; margin-right: 5px; } .mainMenu .boxMenu > li[data-identifier="com.woltlab.wcf.MembersList"] > a::before { font-family: FontAwesome; content: "\f0c0"; margin-right: 5px; } .mainMenu .boxMenu > li[data-identifier="com.woltlab.gallery.Gallery"] > a::before { font-family: FontAwesome; content: "\f03e"; margin-right: 5px; } .mainMenu .boxMenu > li[data-identifier="com.woltlab.calendar.Calendar"] > a::before { font-family: FontAwesome; content: "\f133"; margin-right: 5px; } .mainMenu .boxMenu > li[data-identifier="com.woltlab.blog.Blog"] > a::before { font-family: FontAwesome; content: "\f02d"; margin-right: 5px; } .mainMenu .boxMenu > li[data-identifier="com.woltlab.filebase.Filebase"] > a::before { font-family: FontAwesome; content: "\f019"; margin-right: 5px; } .mainMenu .boxMenu > li[data-identifier="com.woltlab.wcf.ArticleList"] > a::before { font-family: FontAwesome; content: "\f1ea"; margin-right: 5px; } .mainMenu .boxMenu > li[data-identifier="com.woltlab.statistic.Statistic"] > a::before { font-family: FontAwesome; content: "\f080"; margin-right: 5px; }
-
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
-
We are currently in progress of a private beta of a coming up extension:
-
-
-
- Offizieller Beitrag
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.
-
Will do that in the next version
-
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).
-
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!