Bootstrap 自定义图标不能正常工作答案

【问题标题】：Bootstrap custom icon does not work wellBootstrap 自定义图标不能正常工作
【发布时间】：2016-01-20 06:08:45
【问题描述】：

我正在尝试将自定义 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/

【问题讨论】：

添加你的代码 jsfiddle
jsfiddle.net/njeovqgc
@DrinkinPeople 如果将背景位置居中，标签将重叠在图像上。

标签： html css twitter-bootstrap pug

【解决方案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/

【讨论】：

【解决方案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/

【讨论】：