Adminlte: Upgrade Font Awesome (to 5.0.8)

[siemensikkema]

Issue type:

• [x] Feature request
• [ ] Bug report
• [ ] Documentation

Environment:

• AdminLTE Version: 2.4.3
• Operating System: all
• Browser (Version): all

Description:

Upgrade Font-awesome (to 5.0.8).

The current version integrated into AdminLTE is 4.7.0. This is also the latest version hosted by the Cloudflare CDN. Font Awesome have their own CDN which could possible be used but I'm not sure if their licensing is compatible: https://cdn.fontawesome.com.

[B0bbyD0llar]

+1

[daniele-athome]

Please stop adding "+1" as comments, it only adds spam, use the reaction button to the original post. Thank you!

[B0bbyD0llar]

@daniele-athome i dont think so.

[almasaeed2010]

I haven't tested FA5 yet but it seems reasonable to support. This will be available in v3.

[dels07]

The way they use svg sometimes make it hard to add custom styles, because svg is generated after document complete load, but there is an option to use webfont like the v4.x

[egmfrs]

I've added a CDN reference for FA5 to my project but the hamburger menu icon no longer displays. It renders as the square / invalid character symbol. Anyone know how I can resolve this?

[iksaku]

I've been working with FontAwesome 5 with AdminLTE v2.4(.x), CSS-based package of FA requires little updates on the styling.
Besides that, the "easy" way to get them working, is to use the SVG-based package. Most icon's positioning can be fixed by giving them a transform of left-8, left-9 or left-10.
Also, there are some other icons in elements which appear in a higher position than they should be, a transform of down-1 is enough most of the time to fix them, or you can use a CSS rule in the icon itself: top: 0.2em.

[rgomez90]

@egmfrs notice that in version 5 they change class fa to fas, it may be your issue.

Version 4

Version 5

[iksaku]

@rgomez90 as stated in the Upgrading from Version 4 part of the documentation, the fa prefix fallsback to the new fas prefix. It shouldn't be an issue, unless the specific icon name changed.
And for @egmfrs's issue, the problem is that the bars icon in the template is referenced directly in the LESS as a Unicode character, instead of being referenced with a <span> or <I> tag. You can actually override it with some custom CSS:

.sidebar-toggle:before {
    content: none !important;
}

[egmfrs]

I actually had to add a font-weight with the bars icon in order for it to display, which is a bug with fa 5

[maohieng]

@iksaku, thank you. It works for me after I try integrate AdmintLTE 2.4.5 with fontAwesome 5.

[DL6ER]

I was able to use AdminLTE4 with FontAwesome 5.6.3 by only adding the following line to my custom CSS:

.sidebar-toggle:before {
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}

[mmucino1]

I was able to use AdminLTE4 with FontAwesome 5.6.3 by only adding the following line to my custom CSS:

.sidebar-toggle:before {
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}

Worked for AdminLTE v2 and FontAwesome V5.7.1

[REJack]

I'v updated FontAwesome to v5.8.2 in AdminLTE v3-dev with #2110.