Fix some fa icons and add compatibility layer to admin-lte

assets/js/Admin.js

@@ -261,7 +261,7 @@ const Admin = {
     Admin.log('[core|add_filters] configure filters on', subject);
 
     function updateCounter() {
-      const count = jQuery('a.sonata-toggle-filter .fa-check-square-o', subject).length;
+      const count = jQuery('a.sonata-toggle-filter .fa-check-square', subject).length;
 
       jQuery('.sonata-filter-count', subject).text(count);
     }
@@ -288,14 +288,14 @@ const Admin = {
       if (jQuery(target).is(':visible')) {
         filterToggler
           .filter(':not(.fa-minus-circle)')
-          .removeClass('fa-check-square-o')
-          .addClass('fa-square-o');
+          .removeClass('fa-check-square')
+          .addClass('fa-square');
         target.hide();
       } else {
         filterToggler
           .filter(':not(.fa-minus-circle)')
-          .removeClass('fa-square-o')
-          .addClass('fa-check-square-o');
+          .removeClass('fa-square')
+          .addClass('fa-check-square');
         target.show();
       }
 

assets/scss/admin-lte-fas.scss

@@ -0,0 +1,121 @@
+/*!
+ * This file is part of the Sonata Project package.
+ *
+ * (c) Thomas Rabaix <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+// This file adds compatibility with the Font Awesome fas class
+// and the AdminLTE styles
+
+.carousel-control > .fas {
+  display: inline-block;
+  font-size: 40px;
+  margin-top: -20px;
+  position: absolute;
+  top: 50%;
+  z-index: 5;
+}
+
+.btn-app > .fas {
+  display: block;
+  font-size: 20px;
+}
+
+.box-header > .fas {
+  display: inline-block;
+  font-size: 18px;
+  line-height: 1;
+  margin: 0;
+  margin-right: 5px;
+}
+
+.timeline > li > .fas {
+  background: #d2d6de;
+  border-radius: 50%;
+  color: #666;
+  font-size: 15px;
+  height: 30px;
+  left: 18px;
+  line-height: 30px;
+  position: absolute;
+  text-align: center;
+  top: 0;
+  width: 30px;
+}
+
+.treeview-menu > li > a > .fas {
+  width: 20px;
+}
+
+.nav-pills > li > a > .fas {
+  margin-right: 5px;
+}
+
+.dropdown-menu > li > a > .fas {
+  margin-right: 10px;
+}
+
+.sidebar-menu > li > a > .fas {
+  width: 20px;
+}
+
+.box .overlay > .fas,
+.overlay-wrapper .overlay > .fas {
+  color: #000;
+  font-size: 30px;
+  left: 50%;
+  margin-left: -15px;
+  margin-top: -15px;
+  position: absolute;
+  top: 50%;
+}
+
+.todo-list > li .tools > .fas {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.user-panel > .info > a > .fas {
+  margin-right: 3px;
+}
+
+.content-header > .breadcrumb > li > a > .fas {
+  margin-right: 5px;
+}
+
+.nav-tabs-custom > .nav-tabs > li.header > .fas {
+  margin-right: 5px;
+}
+
+.main-header .navbar .nav > li.user > a > .fas {
+  margin-right: 5px;
+}
+
+.navbar-nav > .notifications-menu > .dropdown-menu > li .menu > li > a > .fas {
+  width: 20px;
+}
+
+.form-control-feedback.fas {
+  line-height: 34px;
+}
+
+.input-lg + .form-control-feedback.fas,
+.input-group-lg + .form-control-feedback.fas {
+  line-height: 46px;
+}
+
+.input-sm + .form-control-feedback.fas,
+.input-group-sm + .form-control-feedback.fas {
+  line-height: 30px;
+}
+
+.form-group-lg .form-control + .form-control-feedback.fas {
+  line-height: 46px;
+}
+
+.form-group-sm .form-control + .form-control-feedback.fas {
+  line-height: 30px;
+}

assets/scss/app.scss

@@ -48,3 +48,4 @@
 @import "./layout";
 @import "./tree";
 @import "./flashmessage";
+@import "./admin-lte-fas";

src/Block/AdminStatsBlockService.php

@@ -71,7 +71,7 @@ public function execute(BlockContextInterface $blockContext, ?Response $response
     public function configureSettings(OptionsResolver $resolver): void
     {
         $resolver->setDefaults([
-            'icon' => 'fa-line-chart',
+            'icon' => 'fa-chart-line',
             'text' => 'Statistics',
             'translation_domain' => null,
             'color' => 'bg-aqua',

src/Resources/views/Block/block_admin_preview.html.twig

@@ -21,7 +21,7 @@ file that was distributed with this source code.
         <div class="box-header with-border">
             {% set icon = settings.icon|default('') %}
             {% if icon %}
-                <i class="fa {{ icon|raw }}"></i>
+                <i class="fas {{ icon|raw }}"></i>
             {% endif %}
             <h3 class="box-title">
                 <a href="#{{ inlineAnchor }}">{{ settings.text|trans({}, translation_domain) }}</a>

src/Resources/views/Block/block_stats.html.twig

@@ -27,7 +27,7 @@ file that was distributed with this source code.
             </p>
         </div>
         <div class="icon">
-            <i class="fa {{ settings.icon }}"></i>
+            <i class="fas {{ settings.icon }}"></i>
         </div>
         <a href="{{ admin.generateUrl('list', {filter: settings.filters}) }}" class="small-box-footer">
             {{ 'stats_view_more'|trans({}, 'SonataAdminBundle') }} <i class="fas fa-arrow-circle-right" aria-hidden="true"></i>

src/Resources/views/CRUD/base_list.html.twig

@@ -255,7 +255,7 @@ file that was distributed with this source code.
                         {% set filterDisplayed = filter.isActive() or filter.option('show_filter') is same as (true) %}
                         <li>
                             <a href="#" class="sonata-toggle-filter sonata-ba-action" filter-target="filter-{{ admin.uniqid }}-{{ filter.name }}" filter-container="filter-container-{{ admin.uniqid() }}">
-                                <i class="fa {{ filterDisplayed ? 'fa-check-square-o' : 'fa-square-o' }}"></i>
+                                <i class="fas {{ filterDisplayed ? 'fa-check-square' : 'fa-square' }}"></i>
                                 {% if filter.label is not same as(false) %}
                                     {{ filter.label|trans(filter.option('label_translation_parameters', {}), filter.translationDomain ?: admin.translationDomain) }}
                                 {% endif %}

src/Resources/views/CRUD/batch_confirmation.html.twig

@@ -54,7 +54,7 @@ file that was distributed with this source code.
                         {{ 'delete_or'|trans({}, 'SonataAdminBundle') }}
 
                         <a class="btn btn-success" href="{{ admin.generateUrl('list') }}">
-                            <i class="fas fa-th-list" aria-hidden="true"></i> {{ 'link_action_list'|trans({}, 'SonataAdminBundle') }}
+                            <i class="fas fa-list" aria-hidden="true"></i> {{ 'link_action_list'|trans({}, 'SonataAdminBundle') }}
                         </a>
                     {% endif %}
                 </form>

src/Resources/views/Menu/sonata_menu.html.twig

@@ -41,7 +41,7 @@
             {{ icon|raw }}
             {{ parent() }}
             {%- if item.extra('keep_open') is not defined or not item.extra('keep_open') -%}
-                <span class="pull-right-container"><i class="fa pull-right fa-angle-left"></i></span>
+                <span class="pull-right-container"><i class="fas pull-right fa-angle-left"></i></span>
             {%- endif -%}
         </a>
     {% endapply %}

src/Resources/views/standard_layout.html.twig

@@ -132,7 +132,7 @@ file that was distributed with this source code.
                 {% endblock %}
                 {% block sonata_nav %}
                     <nav class="navbar navbar-static-top">
-                        <a href="#" class="sidebar-toggle" data-toggle="push-menu"
+                        <a href="#" class="sidebar-toggle fa5" data-toggle="push-menu"
                            role="button" title="{{ 'toggle_navigation'|trans({}, 'SonataAdminBundle') }}">
                             <span class="sr-only">{{ 'toggle_navigation'|trans({}, 'SonataAdminBundle') }}</span>
                         </a>

tests/Block/AdminStatsBlockServiceTest.php

@@ -41,7 +41,7 @@ public function testDefaultSettings(): void
         $blockContext = $this->getBlockContext($blockService);
 
         $this->assertSettings([
-            'icon' => 'fa-line-chart',
+            'icon' => 'fa-chart-line',
             'text' => 'Statistics',
             'translation_domain' => null,
             'color' => 'bg-aqua',