需要帮助造型图标

Question

我正在尝试设计图标，我遇到了一些麻烦，因为图标的样式正在推动边框顶部和边框底部属性不合适。如下所示。任何帮助将不胜感激，它可能是我在css中忽略的东西，我不确定。

我正在努力实现以下目标：

我的代码是：

＆＃13;

＆＃13;

h3{
    padding:0;
    margin:0;
    font:'Century Gothic', CenturyGothic, AppleGothic, sans-serif;
    color: #6b6b6b;
    margin-left: 30%;
        overflow: hidden;

}

/*order icon*/
a#order{
    background: url("./Images/bell1.png") no-repeat !important;
    display: inline-block;
      vertical-align: middle;
    float:left;
    margin-left: 20%;
    background-position: 0 0;
    

＆＃13;

 <a  id="order" class="header" href="#" onclick="toggleVisibility('Order');"><h3 id="order">Orders</h3></a>
            <div id="Order" style="display: none;">    

＆＃13;

＆＃13;

＆＃13;

Answer 1

试一试。它有点不同寻常，但它对导航项目非常有效。为了便于阅读和现代网络，我重新组织了你的html和css。 translateY不会比IE9小，所以如果你走这条路线，坚持垂直对齐。

http://jsfiddle.net/calebswank/qm4yqL8b/

<a id="order" class="header" href="#" onclick="toggleVisibility('Order');">
 <h3>Orders</h3>
</a>