61117792d4e14c4f3daeb754964893f50592356d
lrnassar
  Wed May 6 19:10:46 2026 -0700
Use Font Awesome info-circle for chromAlias icon and soften styling, refs #29201

Replace the unicode ⓘ (CIRCLED LATIN SMALL LETTER I) with the
Font Awesome fa-info-circle icon to fix pixelated/inconsistent rendering
in Chrome and Edge — the unicode glyph falls back to platform symbol
fonts that produce low-quality bitmap glyphs at small sizes. The FA
glyph is vector and renders identically across browsers. Also soften
the icon color to #aaa, drop font-size to 95%, and tighten right margin
to 0.1em.

diff --git src/hg/htdocs/style/HGStyle.css src/hg/htdocs/style/HGStyle.css
index 21c3a4d6edc..e5579e3f4a0 100644
--- src/hg/htdocs/style/HGStyle.css
+++ src/hg/htdocs/style/HGStyle.css
@@ -15,39 +15,39 @@
 
 
 body.training {
         background: url("../../images/internal_bg1.jpg") repeat-x fixed left bottom #F9F9F7;
 }
 
 #searchHelp {
         display: inline;
         margin-left: 0.5em;
         font-size: 80%;
 }
 
 #chromAliases {
         display: inline;
         margin-left: 0.1em;
-        margin-right: 0.05em;
-        font-size: 110%;
+        margin-right: 0.1em;
+        font-size: 95%;
         vertical-align: middle;
         cursor: help;
 }
 
 #chromAliases a {
         text-decoration: none;
-        color: #666;
+        color: #aaa;
 }
 
 a:link {
         color: #121E9A; 
         text-decoration: underline
 }
 
 input[type="submit"], input[type="button"], button {
     border: 1px solid rgba(100, 100, 100, .5);
     border-radius: 3px;
     margin: 0;
     padding-top: 3px;
     padding-bottom: 3px;
     background-color: #EEE;
 }