输入组附加组件内的字形不垂直对齐

Question

input-group-addon内部的字形图标未垂直对齐，它们似乎悬垂了几个px。

我查看了此页面上的帖子：

Bootstrap input-group-addon Not Vertically Aligned 但是他们都没有解决我的问题。

这是我的代码：

<div class="input-group">
    <input type="text" style='font-size: 15px;' id="email_input" class="input form-control big"
        value="" name="email_input" data-required_mark="required" data-field_type="email"
        data-original_id="email" placeholder="Email address">
    <span class="input-group-addon">        
        <i id="email_error_X" class="error_glyphicon glyphicon glyphicon-remove-sign"
            style="display: inline-block;">
        </i>
    </span>
</div>

这是我的一些CSS：

.error_glyphicon {
    display: none;
    font-size: 30px;
    color: red;
    /* background-color: yellow; */
    text-shadow: 2px 2px 4px #000000;
}

是的，display: none和display: inline-block是矛盾的，但是根据我的需要，后者会覆盖前者。 当然，我没有收到任何错误消息或任何东西。 这是结果的摘要： enter image description here 如您所见，符号未对齐。