Bootstrap自定義圖標效果不佳

我試圖將自定義GMail圖標添加到自舉按鈕。不幸的是，渲染後看起來很尷尬。我想讓GMail圖標和標籤垂直和水平居中。Bootstrap自定義圖標效果不佳

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/

來源

2016-01-20 ppshein

添加代碼的jsfiddle –

https://jsfiddle.net/njeovqgc/ – ppshein

@DrinkinPeople如果把後臺定位中心，標籤將會在圖像重疊。 – ppshein

改變一些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/

來源

2016-01-20 06:39:19

你需要做一些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/

來源

2016-01-20 07:38:48

Bootstrap自定義圖標效果不佳

回答

相關問題