Upgrade to font awesome 5

UPGRADE-4.0.md

@@ -1,6 +1,15 @@
 UPGRADE FROM 3.x to 4.0
 =======================
 
+## Upgrade to Font Awesome 5
+
+Some icons have been renamed by Font Awesome, and the correct class is now `fas` or `fab` instead of
+`fa`, for example before you would have used `fa fa-edit`, and after `fas fa-edit`.
+
+Sonata includes the compatibility layer of Font Awesome 5 that ensure the old icons names from version 4
+still works. So we encourage to upgrade the names of all your custom icons, but the old code should
+still work.
+
 ## Removed `famfamfam` icon set
 
 If you still need it, please set it up on your own!

assets/js/Admin.js

@@ -213,7 +213,7 @@ const Admin = {
     Admin.log('[core|setup_xeditable] configure xeditable on', subject);
     jQuery('.x-editable', subject).editable({
       emptyclass: 'editable-empty btn btn-sm btn-default',
-      emptytext: '<i class="fa fa-pencil"></i>',
+      emptytext: '<i class="fas fa-pencil-alt"></i>',
       container: 'body',
       placement: 'auto',
       success(response) {

assets/scss/app.scss

@@ -8,7 +8,12 @@
  */
 
 @import "~bootstrap/dist/css/bootstrap.css";
-@import "~font-awesome/scss/font-awesome";
+
+// Add Font Awesome Free and the v4 compatibility layer
+// this layer should only be removed when we are sure we have replaced
+// all icons to the new naming on all Sonata code
+@import "~@fortawesome/fontawesome-free/css/all.css";
+@import "~@fortawesome/fontawesome-free/css/v4-shims.css";
 
 // Add Source Sans Pro Font with all options
 // This font is used by AdminLTE

docs/cookbook/recipe_custom_action.rst

@@ -280,7 +280,7 @@ Create a template for that button:
 
     <li>
         <a class="sonata-action-element" href="{{ admin.generateUrl('import') }}">
-            <i class="fa fa-level-up"></i> {{ 'import_action'|trans({}, 'SonataAdminBundle') }}
+            <i class="fas fa-level-up-alt"></i> {{ 'import_action'|trans({}, 'SonataAdminBundle') }}
         </a>
     </li>
 
@@ -300,7 +300,7 @@ Create a template for that button:
 .. code-block:: html+jinja
 
     <a class="btn btn-link btn-flat" href="{{ admin.generateUrl('import') }}">
-        <i class="fa fa-level-up"></i> {{ 'import_action'|trans({}, 'SonataAdminBundle') }}
+        <i class="fas fa-level-up-alt"></i> {{ 'import_action'|trans({}, 'SonataAdminBundle') }}
     </a>
 
 Or you can pass values as array::
@@ -311,7 +311,7 @@ Or you can pass values as array::
             'label' => 'import_action',
             'translation_domain' => 'SonataAdminBundle',
             'url' => $this->generateUrl('import'),
-            'icon' => 'level-up',
+            'icon' => 'level-up-alt',
         ];
 
         return $actions;

docs/cookbook/recipe_knp_menu.rst

@@ -117,7 +117,7 @@ The following configuration uses a menu provider to populate the menu group ``my
                 groups:
                     my_group:
                         provider:        'MyBundle:MyMenuProvider:getMyMenu'
-                        icon:            '<i class="fa fa-edit"></i>'
+                        icon:            '<i class="fas fa-edit"></i>'
 
 With KnpMenuBundle you can create a custom menu by using a builder class
 or by declaring it as a service. Please see the `Knp documentation`_ for
@@ -163,7 +163,7 @@ name ``sonata.admin.event.configure.menu.sidebar``::
                 'label' => 'Daily and monthly reports',
                 'route' => 'app_reports_index',
             ])->setExtras([
-                'icon' => '<i class="fa fa-bar-chart"></i>',
+                'icon' => '<i class="fas fa-chart-bar"></i>',
             ]);
         }
     }
@@ -232,7 +232,7 @@ open and ignore open/close effects:
                     keep_open:       true
                     label:           sonata_media
                     label_catalogue: SonataMediaBundle
-                    icon:            '<i class="fa fa-image"></i>'
+                    icon:            '<i class="fas fa-image"></i>'
                     items:
                         - sonata.media.admin.media
                         - sonata.media.admin.gallery

docs/cookbook/recipe_workflow_integration.rst

@@ -71,10 +71,10 @@ You can use the provided extension to take care of your entity admin.
            arguments:
                - '@workflow.registry'
                - transitions_icons:
-                     start_review: fa fa-question
-                     interrupt_review: fa fa-edit
-                     restart_review: fa fa-question
-                     publish: fa fa-check
+                     start_review: fas fa-question
+                     interrupt_review: fas fa-edit
+                     restart_review: fas fa-question
+                     publish: fas fa-check
 
 .. code-block:: yaml
 

docs/reference/action_list.rst

@@ -632,7 +632,7 @@ Example::
                 'collapse' => true
             ])
             ->add('upvotes', null, [
-                'label_icon' => 'fa fa-thumbs-o-up'
+                'label_icon' => 'fas fa-thumbs-up'
             ])
             ->add('actions', null, [
                 'header_class' => 'customActions',
@@ -662,7 +662,7 @@ If you want to show only the ``label_icon``::
 
             ->add('upvotes', null, [
                 'label' => false,
-                'label_icon' => 'fa fa-thumbs-o-up',
+                'label_icon' => 'fas fa-thumbs-up',
             ])
 
 Mosaic view button

docs/reference/configuration.rst

@@ -87,7 +87,7 @@ Full Configuration Options
                 form_type: standard
                 default_group: default
                 default_label_catalogue: SonataAdminBundle
-                default_icon: '<i class="fa fa-folder"></i>'
+                default_icon: '<i class="fas fa-folder"></i>'
                 dropdown_number_groups_per_colums:  2
                 title_mode: ~ # One of "single_text"; "single_image"; "both"
 

docs/reference/preview_mode.rst

@@ -88,11 +88,11 @@ expects a different object you can set your own variables prior to calling ``par
 
     {% block formactions %}
         <button class="btn btn-success" type="submit" name="btn_preview_approve">
-            <i class="fa fa-check"></i>
+            <i class="fas fa-check"></i>
             {{ 'btn_preview_approve'|trans({}, 'SonataAdminBundle') }}
         </button>
         <button class="btn btn-danger" type="submit" name="btn_preview_decline">
-            <i class="fa fa-times"></i>
+            <i class="fas fa-times"></i>
             {{ 'btn_preview_decline'|trans({}, 'SonataAdminBundle') }}
         </button>
     {% endblock %}

package.json

@@ -1,9 +1,9 @@
 {
   "dependencies": {
     "@fontsource/source-sans-pro": "^4.2",
+    "@fortawesome/fontawesome-free": "^5.15",
     "admin-lte": "^2.4",
     "bootstrap": "^3.3",
-    "components-font-awesome": "^4.7",
     "icheck": "^1.0",
     "jquery": "^2.2",
     "jquery-form": "^4.0",

src/Block/AdminSearchBlockService.php

@@ -115,7 +115,7 @@ public function configureSettings(OptionsResolver $resolver): void
                 'query' => '',
                 'page' => 0,
                 'per_page' => 10,
-                'icon' => '<i class="fa fa-list"></i>',
+                'icon' => '<i class="fas fa-list"></i>',
             ])
             ->setRequired('admin_code')
             ->setAllowedTypes('admin_code', ['string']);

src/DependencyInjection/Admin/AbstractTaggedAdmin.php

@@ -42,7 +42,7 @@ abstract class AbstractTaggedAdmin implements TaggedAdminInterface
      *
      * @deprecated since sonata-project/sonata-admin 3.x, will be removed in 4.0
      */
-    public const MOSAIC_ICON_CLASS = 'fa fa-th-large fa-fw';
+    public const MOSAIC_ICON_CLASS = 'fas fa-th-large fa-fw';
 
     /**
      * The code related to the admin.

src/DependencyInjection/Admin/TaggedAdminInterface.php

@@ -49,8 +49,8 @@ interface TaggedAdminInterface extends MutableTemplateRegistryAwareInterface
     public const ADMIN_TAG = 'sonata.admin';
 
     public const DEFAULT_LIST_MODES = [
-        'list' => ['class' => 'fa fa-list fa-fw'],
-        'mosaic' => ['class' => 'fa fa-th-large fa-fw'],
+        'list' => ['class' => 'fas fa-list fa-fw'],
+        'mosaic' => ['class' => 'fas fa-th-large fa-fw'],
     ];
 
     /**

src/DependencyInjection/Configuration.php

@@ -166,7 +166,7 @@ public function getConfigTreeBuilder(): TreeBuilder
                             ->info('Label Catalogue used for admin services if one isn\'t provided.')
                         ->end()
                         ->scalarNode('default_icon')
-                            ->defaultValue('<i class="fa fa-folder"></i>')
+                            ->defaultValue('<i class="fas fa-folder"></i>')
                             ->info('Icon used for admin services if one isn\'t provided.')
                         ->end()
                         ->integerNode('dropdown_number_groups_per_colums')->defaultValue(2)->end()