Merge pull request #1784 from carlfeberhard/fix.fa

[16.01] Fix chrome-only intermittent rendering error of font awesome icons th…

client/galaxy/style/less/base.less

@@ -16,6 +16,15 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+.fa {
+  // The following overrides the 'font-size: inherit' rule in fontawesome/core.less and prevents an intermittant chrome
+  // bug that makes fa icons render in the default font (e.g. times) which, since most of the icons use unicode, make
+  // the icons invisible. This only occurs when the font-size is further embiggened down the road (e.g. .icon-btn).
+  // see also: https://github.com/galaxyproject/galaxy/issues/1716
+  // and: https://github.com/FortAwesome/Font-Awesome/issues/5128
+  // TODO: remove
+  font-size: 14px;
+}
 
 @import "select2.less";
  /* fix for zero width select2 - remove when fixed there */

client/galaxy/style/less/ui/icon-btn.less

@@ -1,40 +1,19 @@
-// trello-ish style
-//@icon-btn-size:     18px;
-//@icon-btn-margin:   2px;
-//@icon-btn-color:    #AAA;
-//@icon-btn-bg:       @btn-default-bg;
-//@icon-btn-border:   lightgrey;
-
-// no bg
-//@icon-btn-size:     16px;
-//@icon-btn-margin:   0px;
-//@icon-btn-color:    #444;
-//@icon-btn-bg:       transparent;
-//@icon-btn-border:   transparent;
-
-// dark bg
-//@icon-btn-size:     16px;
-//@icon-btn-margin:   1px;
-//@icon-btn-color:    @link-color;
-//@icon-btn-bg:       rgba( 0, 0, 0, 0.1 );
-//@icon-btn-border:   transparent;
-
-// big & dark style
 @icon-btn-size:     22px;
 @icon-btn-margin:   2px;
 @icon-btn-color:    @btn-default-color;
-//@icon-btn-bg:       transparent;
+
 @icon-btn-bg:       @btn-default-bg;
 @icon-btn-border:   @btn-default-border;
 
 .icon-btn {
     display : inline-block;
     height  : @icon-btn-size;
     width   : @icon-btn-size;
+    font-size: 125%;
+
     // center the icon
     text-align: center;
     line-height: @icon-btn-size - 3;
-    font-size: 1.2em;
 
     // colors and borders
     border-radius: 3px;
@@ -50,14 +29,15 @@
         background-color: white;
         color: maroon;
     }
-
 }
+
 .icon-btn.disabled {
     background-color: transparent;
     color: #BBB;
     border-color: #BBB;
     //color: @icon-btn-border;
 }
+
 .icon-btn-group {
     display: inline-block;
     .icon-btn:not(:last-child) {