Две иконки FontAwesome в Twitter с разными стилями на одной странице Boostrap 3

Question

Мне нужно разместить две иконки Twitter с разными стилями (стандартными и пользовательскими) на одной странице Bootstrap 3.

Для этого я решил скопировать каждый соответствующий стиль FontAwesome из файла font-awesome.css. Результат - почти идеальная деталь из вертикального выравнивания:

Если я редактирую оригинальные стили fa, выравнивание по вертикали в порядке. Ты знаешь почему?

<style>
    .fa_copy {
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;        
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        font-size: 30px;
        height: 50px;
        margin: 5px 2px;
        padding: 16px;
        text-align: center;
        text-decoration: none;
        width: 50px;
    }

    .fa_copy:hover {
        opacity: 0.7;
        text-decoration: none
    }

    .fa_copy-twitter:before {
        content: "\f099";
    }

    .fa_copy-twitter {
        background: #55ACEE;
        color: white;
    }
<style>

<!-- custom -->
<a href="#" class="fa_copy fa_copy-twitter" onclick="..."></a>
<!-- standard -->
<a href="#"><i class="fa fa-twitter"></i></a>