swap minimal plus sign with svg image to fix alignment problem

index.php

@@ -1541,7 +1541,9 @@ function attr($attr, $file) {
 				<!--  Zoom Controls -->
 				<div id="zoomControls">
 					<div id="center-button" class="viewport-action fa fa-crosshairs" title="Center the Sun in the Viewport"></div>
-					<div id="zoom-in-button" title="Zoom in.">+</div>
+					<div id="zoom-in-button" title="Zoom in.">
+						<img src="/resources/images/ftedit-add.svg" style="width:80%; height:80%" alt="HV project transparent image"/> 
+					</div>
 					<div id="zoomSliderContainer">
 						<div id="zoomControlSlider"></div>
 					</div>

resources/css/zoom-control.css

@@ -76,9 +76,13 @@
     line-height: 0.66em;
 }
 #zoomControls #zoom-in-button  {
+    justify-content:center;
+    align-items:center;
+    display:flex;
     top: 35px;
 }
 
+
 #zoomControls #center-button {
                 position: relative;
                  display: inline-block;
@@ -142,4 +146,4 @@
               color: #cb2027;
        border-color: #cb2027;
    background-color: black;
-}*/
+}*/