Font awesome, same icon with different width

I have a little problem with Font Awesome icon.

I have 2 same versions of website (for development and tests) and the icon displays differently while having same CSS styles.

I described this problem with this icon:

.btnFilter {
    color: #666666;
    padding-top: 4px;
    font-size: 18px;
    text-align: center;
}
.circle {
    border: solid #999 1px;
    border-radius: 13px;
    box-sizing: border-box;
    width: 26px;
    height: 26px;
    text-align: center;
    font-size: 18px;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-times circle btnFilter"></i>

This CSS and HTML markup is placed on both dev and test versions, chrome dev tools displays same styles, and hovering font-awesome icon :before pseudoelement's size gives result as on the image above.

Font awesome, same icon with different width

2 Answers