diff --git a/addons/website/static/src/css/editor.css b/addons/website/static/src/css/editor.css
index 0bb901c3676..e68d888fbac 100644
--- a/addons/website/static/src/css/editor.css
+++ b/addons/website/static/src/css/editor.css
@@ -219,6 +219,16 @@ ul.oe_menu_editor .disclose {
   text-align: center;
   cursor: pointer;
 }
+.modal #fa-preview {
+  text-align: center;
+}
+.modal #fa-preview span {
+  cursor: pointer;
+  padding: 0 15px;
+}
+.modal #fa-preview .font-icons-selected {
+  background-color: #dddddd;
+}
 
 .existing-attachments .pager .disabled {
   display: none;
diff --git a/addons/website/static/src/css/editor.sass b/addons/website/static/src/css/editor.sass
index 8e29015fac0..d35e07e6995 100644
--- a/addons/website/static/src/css/editor.sass
+++ b/addons/website/static/src/css/editor.sass
@@ -173,17 +173,28 @@ ul.oe_menu_editor
         visibility: visible !important
 
 // fontawesome modal
-.modal .font-icons-icons
-    font-size: 2em
-    max-height: 6em
-    overflow: auto
+.modal
+    .font-icons-icons
+        font-size: 2em
+        max-height: 6em
+        overflow: auto
 
-    .font-icons-icon
-        display: inline-block
-        width: 2em
-        padding: 0.25em
+        .font-icons-icon
+            display: inline-block
+            width: 2em
+            padding: 0.25em
+            text-align: center
+            cursor: pointer
+
+    #fa-preview
         text-align: center
-        cursor: pointer
+
+        span
+            cursor: pointer
+            padding: 0 15px
+        .font-icons-selected
+            background-color: #ddd
+
 
 .existing-attachments .pager .disabled
     display: none
diff --git a/addons/website/static/src/js/website.editor.js b/addons/website/static/src/js/website.editor.js
index 35a8fad5707..778ab6b699b 100644
--- a/addons/website/static/src/js/website.editor.js
+++ b/addons/website/static/src/js/website.editor.js
@@ -1463,6 +1463,13 @@
                 this.$('#fa-icon').val(e.target.getAttribute('data-id'));
                 this.update_preview();
             },
+            'click #fa-preview span': function (e) {
+                e.preventDefault();
+                e.stopPropagation();
+
+                this.$('#fa-size').val(e.target.getAttribute('data-size'));
+                this.update_preview();
+            }
         }),
 
         // List of FontAwesome icons in 4.0.3, extracted from the cheatsheet.
@@ -1508,7 +1515,7 @@
             for (var i = 0; i < classes.length; i++) {
                 var cls = classes[i];
                 switch(cls) {
-                case 'fa-lg':case 'fa-2x':case 'fa-3x':case 'fa-4x':case 'fa-5x':
+                case 'fa-2x':case 'fa-3x':case 'fa-4x':case 'fa-5x':
                     // size classes
                     this.$('#fa-size').val(cls);
                     continue;
@@ -1545,7 +1552,24 @@
             ];
         },
         update_preview: function () {
-            this.$('#fa-preview')[0].className = this.get_fa_classes().join(' ');
+            var $preview = this.$('#fa-preview').empty();
+            var sizes = ['', 'fa-2x', 'fa-3x', 'fa-4x', 'fa-5x'];
+            var classes = this.get_fa_classes();
+            var no_sizes = _.difference(classes, sizes).join(' ');
+            var selected = false;
+            for (var i = sizes.length - 1; i >= 0; i--) {
+                var size = sizes[i];
+
+                var $p = $('<span>')
+                        .attr('data-size', size)
+                        .addClass(size)
+                        .addClass(no_sizes);
+                if ((size && _.contains(classes, size)) || (!size && !selected)) {
+                    $p.addClass('font-icons-selected');
+                    selected = true;
+                }
+                $preview.prepend($p);
+            }
         }
     });
 
diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml
index fa408ef796b..1f102ec4a1a 100644
--- a/addons/website/static/src/xml/website.editor.xml
+++ b/addons/website/static/src/xml/website.editor.xml
@@ -207,12 +207,12 @@
         <t t-call="website.editor.dialog">
             <t t-set="title">Icon:</t>
             <form>
-                <div class="form-group">
-                    Preview: <span id="fa-preview"/>
+                <div class="form-group" id="fa-preview">
+
                 </div>
                 <div class="form-group fa">
-                    <label for="fa-icon">icon</label>
                     <input type="hidden" id="fa-icon" class="form-control"/>
+                    <input type="hidden" id="fa-size" class="form-control"/>
                     <div class="font-icons-icons">
                         <span t-foreach="widget.icons" t-as="icon"
                               class="fa font-icons-icon"
@@ -221,17 +221,6 @@
                         </span>
                     </div>
                 </div>
-                <div class="form-group">
-                    <label for="fa-size">size</label>
-                    <select id="fa-size" class="form-control">
-                        <option value="">Default</option>
-                        <option value="fa-lg">Large</option>
-                        <option value="fa-2x">x2</option>
-                        <option value="fa-3x">x3</option>
-                        <option value="fa-4x">x4</option>
-                        <option value="fa-5x">x5</option>
-                    </select>
-                </div>
                 <div class="form-group">
                     <label for="fa-rotation">Rotation</label>
                     <select id="fa-rotation" class="form-control">