hover issue in opera , chrome

Question

Hello i am having an issue with chrome and safari (firefox seems to work fine) i have this html:

<div>
    <a target="_blank" class="newsletter" href="#"><i class="fa fa-newspaper-o"></i></a>
</div>

CSS:

.newsletter i{
    height:35px;
    width:35px;
    color:#FFFFFF;
    font-size: 18px;
    background-color: #00495e;
    border-radius: 100%;
    border:1px solid #FFFFFF;
    padding:7px;
    transition: all 0.5s;
  -moz-transition: all 0.5s; /* Firefox 4 */
  -webkit-transition: all 0.5s; /* Safari and Chrome */
  -o-transition: all 0.5s; /* Opera */
}
.newsletter i:hover{
    color:#00495e;
    background-color: #FFFFFF;
}

i am not able to hover inside all circle, the place of icon doesnt work. I mean, when i pass mouse over icon inside circle doesnt do the hover effect and doesnt appear the click icon.

Answer 1

Here it is:

.newsletter i {
  display:block;
  text-align: center;
  line-height:35px;
  height: 35px;
  width: 35px;
  color: #FFFFFF;
  font-size: 18px;
  background-color: #00495e;
  border-radius: 100%;
  border: 1px solid #FFFFFF;
  padding: 7px;
  transition: all 0.5s;
  -moz-transition: all 0.5s;
  /* Firefox 4 */
  -webkit-transition: all 0.5s;
  /* Safari and Chrome */
  -o-transition: all 0.5s;
  /* Opera */
}

.newsletter {
  text-decoration: none;
}

.newsletter:hover i {
  color: #00495e;
  background-color: #FFFFFF;
}

https://jsfiddle.net/Lnats6fj/