Adminlte: sidebar-toggle icon isn't set

[JuKu]

Issue type:

• [ ] Feature request
• [x] 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

[JuKu]

Okay, i think the bug occured to me after upgrading font awesome icons 4.7.1 to 5.0.9 . Maybe the unicode character in css file was removed in this new version.

[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 */
}

[JuKu]

@chris-ratcliffe Thanks, this looks interesting!
I will try this.

[krloz1003]

Thanks @chris-ratcliffe

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

[aaronhudon]

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.

FYI, this isn't quite right if you are using the commercial version of FontAwesome.

An addition CSS rule should be added:

    .main-header .sidebar-toggle.fa5 {
        font-family: "Font Awesome\ 5 Pro";
    }