Render card icons with new symbol style of Jenkins.

Author: uhafner

src/main/resources/bootstrap5/card.jelly

@@ -35,12 +35,15 @@
       <div class="card-title">
         ${title}
 
-        <j:if test="${pngIcon!=null}">
-          <img src="${pngIcon}" class="icon-right"/>
-        </j:if>
-        <j:if test="${fontAwesomeIcon!=null}">
-          <fa:svg-icon name="${fontAwesomeIcon}" prefix="${fontAwesomeStyle != null ? fontAwesomeStyle : 'solid'}" class="icon-right"/>
-        </j:if>
+        <span class="icon-border">
+          <j:if test="${pngIcon!=null}">
+            <img src="${pngIcon}" class="icon-right"/>
+          </j:if>
+          <j:if test="${fontAwesomeIcon!=null}">
+            <fa:svg-icon name="${fontAwesomeIcon}" prefix="${fontAwesomeStyle != null ? fontAwesomeStyle : 'solid'}"
+                         class="icon-right"/>
+          </j:if>
+        </span>
 
       </div>
       <d:invokeBody/>

src/main/webapp/css/jenkins-style.css

@@ -57,14 +57,24 @@ pre {
     margin-bottom: 1.5rem;
 }
 
-.icon-right {
+.icon-right  {
+    fill: currentColor;
+    height: 24px;
+    width: 24px;
+    position: relative;
+    margin: auto;
+}
+
+.icon-border {
     float: right;
-    fill: var(--fa-image-color);
+    background: var(--item-background--active);
+    border-radius: 100%;
     height: 48px;
     width: 48px;
-    position: absolute;
-    right: 25px;
-    top: 10px;
+    content: "";
+    pointer-events: none;
+    position: relative;
+    display: flex;
 }
 
 .tooltip-inner {