Replicating Spirit Search Widget in the Spirit Theme

I deleted the search widget that was present by default in the Spirit theme on one site ( and kept it on the other (

On I modified the CSS and kept it in the Footer. I'm now wanting to bring the same modified search widget to

I created a search element and copied the modified CSS From into a new style. However it didn't get everything right, seems I'm missing connection to a png file (looking glass icon)? The first screenshot in this post shows what the widget looks like on

I also tried the search widget through the widget element vs the search element itself. I don't know if there is a difference there, but got the same result.

The next post shows a screenshot of the search element/widget on, the desired look.

This is the CSS used for both sites for reference: {
   color: #414042;
   font: italic 14px Open Sans, Arial;
   padding: 8px 10px;
   border-radius: 30px;
   border: 1px solid #4f7e7d;
   width: 170px;
   margin-top: -5px;
i.icon-search {
    margin-left: 160px;
    float: left;
    margin-top: -30px;
.icon-search:before {
    content: "";
    background: url(//;
    background-image: url(//, none;
    /* If it supports multiple backgrounds supports svg */
    top: 0;
    left: 0;
    width: 22px;
    height: 22px;
    display: block;
    position: relative;
    background-position: -538px -867px;

Also, support access is granted and will stay granted for now.

Much Love