Alignment issues in Internet Explorer 11 (CSS)

Question

Alignment issues in Internet Explorer 11 (CSS)

I am using a framework and I have some problems aligning the button containing the icon in Internet Explorer. This is normal if I put text inside instead of an icon. Any ideas? Thank you very much.

HTML

       <div class="medium-3 column">
            <button class="tiny round expand btn-green" type="submit" value="Submit">
                <span class="fi-magnifying-glass btn-i iconic-s" title="magnifying glass" aria-hidden="true"></span>
            </button>
          </div>

CSS

  button, .button {
-webkit-appearance: none;
-moz-appearance: none;
border-radius: 0;
border-style: solid;
border-width: 0;
cursor: pointer;
font-family: "Titillium Web", Helvetica, Roboto, Arial, sans-serif;
font-weight: 400;
line-height: normal;
margin: 0 0 1.25rem;
position: relative;
text-align: center;
text-decoration: none;
display: inline-block;
padding: 1rem 2rem 1.0625rem 2rem;
font-size: 0.875rem;
background-color: #1B98E0;
border-color: #167ab3;
color: #FFFFFF;
-webkit-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
  }

 span.btn-i {
margin-left: 5px;
font-size: 1rem;
 }

  button.tiny, .button.tiny {
padding: 0.625rem 1.25rem 0.6875rem 1.25rem;
font-size: 0.6875rem;
 }

        .button, button {
letter-spacing: 1px;
text-transform: uppercase;
  }