在同一Boostrap 3页面上的两个具有不同样式的FontAwesome Twitter图标

Question

我需要在同一Bootstrap 3页面上放置两个具有不同样式（标准和自定义）的Twitter图标。

为此，我决定从fa文件中复制所有相关的FontAwesome样式。垂直对齐的结果几乎是完美的：

如果我编辑原始的<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> 样式，则垂直对齐效果很好。你知道为什么吗？

width