diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 300e5812c2a..db4fe2f841a 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -814,6 +814,12 @@ section, .oe_img_bg, [data-oe-shape-data] {
         -webkit-background-clip: inherit;
         -webkit-text-fill-color: inherit;
     }
+
+    // On Iphone (Safari & Chrome) and Mac (only Safari), the font awesome icons
+    // are not rendered (invisible) when inside a gradient.
+    .fa {
+        display: inherit;
+    }
 }
 
 /* QWEB */