Bootstrap自定义图标无法正常运行

Question

我正在尝试将自定义GMail图标添加到我的引导按钮。不幸的是，渲染后看起来很尴尬。我希望GMail图标和标签垂直和水平居中。

CSS

.gmail a{
    font-size: 23px;
    font-style: normal;
    padding: 8px 6px;
}

.gmailicon {
    *margin-right: .3em;
    vertical-align: text-top;
    width: 33px;
    height: 30px;
    line-height: 30px;
    background-image: url("/assets/cacheable/images/social/gmail1.png");
    background-position: 10% 50%; 
    background-repeat: no-repeat;
}

HTML

  a.btn.btn-default.btn-xlarge(href='/auth/google', target='_top')
    i.gmailicon #{getMessage('Gmail')}

输出

https://jsfiddle.net/njeovqgc/

Answer 1

更改一些css

.btn-xlarge {
    padding: 13px 23px;
    font-size: 18px; //change this to your desired size
    line-height: normal;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
}

.gmail a{
    font-size: 23px;
    font-style: normal;
    padding: 8px 6px;
}

.gmailicon {
    *margin-right: .3em;
    vertical-align: middle;
    width: 33px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    background-image: url("https://i.imgsafe.org/93c6359.png");
    background-repeat: no-repeat;
}

https://jsfiddle.net/njeovqgc/2/

Answer 2

你需要进行一些css调整。

.btn-xlarge {
padding: 13px 23px;
font-size: 18px; //change this to your desired size
line-height: normal;
-webkit-border-radius: 8px;
   -moz-border-radius: 8px;
        border-radius: 8px;
}

.gmail a{
font-size: 23px;
font-style: normal;
padding: 8px 6px;
}

.gmailicon {
*margin-right: .3em;
vertical-align: text-top;
width: 33px; ------------------ /* REMOVE THIS WIDTH */
height: 30px;
line-height: 30px;
background-image: url("https://i.imgsafe.org/93c6359.png");
text-align:center;
background-repeat: no-repeat;
background-position: center; ------------------ /* ADD CENTER IN BACKGROUND POSITION */
display:block;------------------ /* ADD DISPLAY BLOCK HERE */
}

https://jsfiddle.net/soeb/sscbmz9a/