sidebar-toggle icon isn't set

Issue type:

• Feature request
• Bug report
• Documentation

Environment:

• AdminLTE Version: Newest
• Operating System: Windows 10
• Browser (Version): Firefox (61.0.2)

Description:

Because i use a template engine, if have converted the html files to template files. I don’t know what i have doing, but now everything works except the sidebar-toggle icon:

I have included these css files:

"css": [
        "bower_components/bootstrap/dist/css/bootstrap.min.css",
        "bower_components/font-awesome-5.0.9/css/font-awesome-all.min.css",
        "bower_components/Ionicons/css/ionicons.min.css",
        "bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css",
        "dist/css/AdminLTE.min.css",
        "dist/css/skins/_all-skins.min.css",
        "style/tabs.css",
        "style/icheck/flat/green.css",
        "style/tags/tags.css"
    ],

Included javascript files:

"js_footer": [
        "bower_components/jquery/dist/jquery.min.js",
        "bower_components/bootstrap/dist/js/bootstrap.min.js",
        "bower_components/datatables.net/js/jquery.dataTables.min.js",
        "bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js",
        "bower_components/jquery-slimscroll/jquery.slimscroll.min.js",
        "style/icheck/icheck.min.js",
        "bower_components/fastclick/lib/fastclick.js",
        "dist/js/adminlte.min.js",
        "dist/js/demo.js"
    ]

Also i have found these lines of css, which can be relevant:

.main-header .sidebar-toggle:before {
  content: "\f0c9";
}

HTML code:

<!-- Sidebar toggle button-->
<a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</a>

But this only set’s a character (the image?) before the link?

Can you say me, where i can find the icon or which dependency it has? Or is the icon injected by javascript? Thank you very much!

Btw, the project is open source: https://github.com/JuKu/JuKuCMS

[chris-ratcliffe]

@JuKu , I had this issue as well when I moved to the newer font awesome. It is discussed here: https://stackoverflow.com/questions/47788847/fontawesome-5-font-family-not-work . I was able to fix the issue by changing the AdminLTE.css file to modify the original font-family and also specify a specific font-weight:

.main-header .sidebar-toggle {
  float: left;
  background-color: transparent;
  background-image: none;
  padding: 15px 15px;
  /* font-family: fontAwesome; */
  font-family: "Font Awesome\ 5 Free"; /* cjr */
}
.main-header .sidebar-toggle:before {
  content: "\f0c9";
  font-weight: 900; /* cjr */
}

[REJack]

I’ve added ability to use fontawesome 5 icon on sidebar-toggle in master branch.

In the next release (v2.4.13) you only need to add .fa5 to .sidebar-toggle.