在Bootstrap中使用Font Awesome，其图标大小好像不一样，导致错位

Question

使用Bootstrap 3.3.5，Font Awesome 4.4.0，做登录页面，其显示效果如下图：

如上图，上下两个输入框的图标旁边的竖线，没有上下对齐。
如果我把两个图标换成同一个，就对齐。
这是不是由于fa-user和fa-lock这两个图标的宽度不一样导致的？
有解决办法吗？

页面代码都是最普通的BS语法，没有用任何自己的CSS，代码如下：

<form>
    <div class="form-group has-feedback">
        <label for="username" class="sr-only">用户名</label>
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-user"></i> </span>
            <input id="username" name="username" type="text" class="form-control input-lg" placeholder="请输入用户名">
        </div>
    </div>
    <div class="form-group">
        <label for="password" class="sr-only">密码</label>
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-lock"></i> </span>
            <input id="password" name="password" type="password" class="form-control input-lg" placeholder="请输入密码">
        </div>
    </div>
    <button class="btn btn-lg btn-outline-inverse btn-block" type="submit"><i class="fa fa-refresh fa-spin"></i> 登  录</button>
</form>

---

找到解决办法了：加上fa-fw即可。
不知道这是不是最正确的解决方案？
望指正！

Answer 1

添加 fa-fw 是正确的方案。
fa iconfont 整体质量不高，更多的是以量取胜（你能想到的他基本都有）。比如大小不一的问题，有时你不得不把某些图标的字体设置的更大一些，以保证图标看起来差不多大。

Answer 2

图标这么多 当然不可能完全一样 你要美观一点就两个都居中就好啦 宽度一样 高度就有区别 不可能完美的

Answer 3

也有遇到了与楼主相同的问题，发现了一个可以解决对齐问题的方法。
.fa {

width: 1.2rem;
font-size: 1.2rem;
color: #505B7B;

}
设置.fa的width值与font-size的值一样，可解决对齐问题，但是好像解决不了美观问题。。。

Answer 4

在fa图标前后，插入空格代码即可，      这几个组合，代表不同宽度空格，前后插入一些即可完美！！！ www.elongshi.com