Two FontAwesome Twitter icons with different styles on the same Boostrap 3 page

I need to place two Twitter icons with different style (standard and custom) on the same Bootstrap 3 page.

To do this I decided to copy every relevant FontAwesome style from the font-awesome.css file. The result is almost perfect a part from vertical alignment:

If I edit original fa styles the vertical alignment is fine. Do you know why?

<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>