Font awesome icons not properly aligned in IE

Question

This is how it appears in Chrome while in Internet Explorer, Font-awesome icons are aligned properly in Chrome, Firefox and Opera and Safari but it is shifting down in IE. I have tried several ways but it is still shifting down in IE. I am a beginner in web design.

This is my HTML code.

.navbar-default {
  padding: 30px 0 30px 0;
  background-color: #fff;
  border-bottom: 1px solid #D5D5D5;
  width: 100%;
  margin: 0;
}

.navbar-right {
  font-family: 'Fira Sans Condensed', sans-serif;
  font-size: 16px;
  font-weight: 500;
}

.icon::after {
  content: "\f107";
  /* this is your text. You can also use UTF-8 character codes as I do here */
  font-family: FontAwesome;
  float: right;
  padding-left: 5px;
  color: red;
  display: inline;
}

.icon2:after {
  content: "\f106";
  /* this is your text. You can also use UTF-8 character codes as I do here */
  font-family: FontAwesome;
  float: right;
  padding-left: 5px;
  color: red;
  display: inline-block;
}

.search:after {
  content: "\f002";
  /* this is your text. You can also use UTF-8 character codes as I do here */
  font-family: FontAwesome;
  padding-left: 5px;
  color: black;
  font-size: 1.5em;
  float: right;
}

.navbar-default .navbar-nav>li>a {
  color: black;
  /*Sets the text hover color on navbar*/
  padding-bottom: 6px;
  /*display: flex;*/
}

.navbar-default .navbar-brand {
  color: #000000;
}

.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: red;
}

.navbar-nav {
  display: inline;
  margin-left: 20px;
}

<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans+Condensed:400,500" rel="stylesheet">

<nav class="navbar navbar-default new">
  <div class="container">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="#" class="icon">ABOUT</a></li>
      <li><a href="#" class="icon">HOME</a></li>
      <li><a href="#" class="icon">CONTACT </a></li>
      <li><a href="#" class="icon">ADDRESS </a></li>
      <li>
        <a href="JavaScript:void(0);" class="search"></a>
      </li>
    </ul>
  </div>
</nav>

Answer 1

Remove the style float:right from your .icon::after class. Because you are already adding this styles in the after class. So it will align right automatically after the text it has. This is causing issue in IE.

.icon:after {
  content: "\f107";  
  font-family: FontAwesome;
  /*float: right;*/
  padding-left: 5px;
  color: red;
  display: inline;
}

DEMO

Answer 2

add below css:

    .nav li a {
      display: inline !important;
    }