btn change

client/res/templates/header.tpl

@@ -21,7 +21,9 @@
                         <span class="{{iconClass}}"></span>
                     {{/if}}
                 {{/if}}
+                <span>
                 {{#if html}}{{{html}}}{{else}}{{#if text}}{{text}}{{else}}{{translate label scope=../scope}}{{/if}}{{/if}}
+                </span>
                 </a>
             {{/each}}
 

client/src/view-helper.js

@@ -450,12 +450,12 @@ class ViewHelper {
             }
 
             if (iconHtml) {
-                html = iconHtml + ' ' + html;
+                html = iconHtml + ' ' + '<span>' + html + '</span>';
             }
             else if (iconClass) {
                 const iconHtml = $('<span>').addClass(iconClass).get(0).outerHTML;
 
-                html = iconHtml + ' ' + html;
+                html = iconHtml + ' ' + '<span>' + html + '</span>';
             }
 
             const tag = link ? '<a>' : '<button>';

client/src/views/modal.js

@@ -466,7 +466,7 @@ class ModalView extends View {
             }
 
             if (o.iconHtml && !o.html) {
-                o.html = o.iconHtml + ' ' + this.getHelper().escapeString(o.text);
+                o.html = o.iconHtml + ' <span>' + this.getHelper().escapeString(o.text) + '</span>';
             }
 
             o.onClick = o.onClick || ((d, e) => {

frontend/less/espo/custom.less

@@ -3214,20 +3214,13 @@ a.field-info > span.fa-info-circle {
 .btn-default > .fa-sm.fa-rss {
     position: relative;
     top: -1px;
-    padding-right: 3px;
+    padding-right: 1px;
 }
 
-.header-buttons > .btn {
-    > .fas,
-    > .far {
-        padding-right: 2px;
-    }
-}
-
-.header-buttons > .btn > .fa-plus.fa-sm {
+.btn:not(.btn-icon) > .fa-plus.fa-sm:first-child {
     position: relative;
     top: -1px;
-    padding-right: 3px;
+    padding-right: 1px;
 }
 
 .transform-flip,

frontend/less/espo/elements/buttons.less

@@ -244,6 +244,15 @@ a.btn {
     }
 }
 
+.btn:not(.btn-icon) {
+    > .fas,
+    > .far {
+        &:first-child + span {
+            padding-left: 2px;
+        }
+    }
+}
+
 .btn-text {
     color: var(--btn-text-color);
     //border-radius: 0;