如何給字體真棒圖標背景顏色？

在頁面這個頁面的http://128.199.58.229/landingpage/如何給字體真棒圖標背景顏色？

我有一些字體真棒圖標（社交媒體圖標）。

我想給他們一個白色的背景，就在圖標本身後面。白色背景現在突出。我已閱讀了一些使用寬度，高度和邊框半徑的組合來實現此目的的帖子，但目前沒有成功。

.lt-bus-info .fa { 
background-color: white; 
border-radius: 50%; 
}

這裏有一個的jsfiddle：http://jsfiddle.net/magician11/nfz9sucn/1/ 我要找的只是符號背後的白色：https://dl.dropboxusercontent.com/u/14057353/Screen%20Shot%202014-12-03%20at%204.01.18%20pm.png

任何人都知道如何解決這一問題？謝謝。

來源

2014-12-03 magician11

改爲使用stacked icons。這裏是一個fiddle，你可以玩它使它更好。下面是完整的代碼：

HTML

<ul class="list-inline"> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-facebook"> 
      <i class="fa fa-square fa-stack-2x"></i> 
      <i class="fa fa-facebook fa-stack-1x"></i> 
     </span> 
     </a></li> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-twitter"> 
      <i class="fa fa-square fa-stack-2x"></i> 
      <i class="fa fa-twitter fa-stack-1x"></i> 
     </span> 
    </a></li> 
    <li><a href="#"> 
     <span class="fa-stack fa-lg icon-gplus"> 
      <i class="fa fa-square fa-stack-2x"></i> 
      <i class="fa fa-plus fa-stack-1x"></i> 
     </span> 
     </a></li> 
</ul>

CSS

.fa-stack-1x { 
    color:white; 
} 
.icon-facebook { 
    color:#3b5998; 
} 

.icon-twitter { 
    color:#00aced; 
} 

.icon-gplus{ 
    color:#dd4b39; 
} 

body { 
    background-color: black; 
}

來源

2014-12-03 08:40:12 Lekhnath

完美！謝謝。 – magician11 2014-12-03 08:58:56

我試過這個，但並不工作：'list.list-social> li.fa.fa-facebook.box-icon background：rgba（0,59,89,152）; }'我們可以像上面提到的[這裏]（http：// stackoverflow。com/questions/8084964/how-to-overwrite-styling-in-twitter-bootstrap）？ – stom 2015-04-26 12:53:18

終於，[這]（http://ksloan.net/css-color-definitions-for-font-awesome-social-icons/）爲我工作，謝謝你的小提琴的顏色，爲wordpress新聞我用'。 fa-wordpress { color：＃464646; }' – stom 2015-04-26 13:21:29

我正在尋找解決方案，但沒有找到完美的用更少的代碼，所以我花一點時間，使這個fiddle爲你。

HTML

<div class="background"> 
<i class="fa fa-facebook-square fb-btn"></i> 
<i class="fa fa-twitter-square twt-btn"></i> 
<i class="fa fa-google-plus-square gp-btn"></i> 
</div>

CSS

.fb-btn{ 
    background-color: #fff; 
    border-radius: 50% 8px 10px 50%; 
    color: #305891; 
    font-size: 40px; 
    height: 32px; 
    line-height: 30px;width: 32px; 
    margin: 5px; 
} 

.twt-btn{ 
    background-color: #fff; 
    border-radius: 50%; 
    color: #2ca8d2; 
    font-size: 40px; 
    height: 30px; 
    line-height: 30px; 
    margin: 5px; 
    width: 30px; 
} 

.gp-btn{ 
    background-color: #fff; 
    border-radius: 50%; 
    color: #dd4b39; 
    font-size: 40px; 
    height: 30px; 
    line-height: 30px; 
    width: 30px; 
    margin: 5px; 
} 

.background{ 
    background-color:#cccccc; 
    width:150px; 
    height:60px; 
    padding:60px 50px; 
}

您可能需要一些邊界半徑，行高和利潤髮揮但這是不錯的選擇，更快的解決方案，我相信。

讓我知道是否有任何錯誤！

來源

2015-06-25 09:11:38 Kartic

我很驚訝沒有人提到這種做法尚未：

HTML

  <div class="social-media text-right"> 
      <a href="" class="facebook"> 
       <span class="fa fa-facebook"></span> 
      </a> 
      </div>

CSS

.social-media a 
{ 
    display: inline-block; 
    width: 34px; 
    height: 34px; 
    line-height: 34px; 
    text-align: center; 
    margin-right: 10px; 
    border-radius: 34px; 
} 
    .social-media a.facebook 
    { 
     background: #3b5998; 
    }

來源

2015-12-05 11:42:38 Jahmic

好點。當我增加字體大小時，背景不會覆蓋整個圖標。 http://codepen.io/magician11/pen/Vewgqp – magician11 2015-12-06 11:37:28

有點不同的問題，但我添加了額外的CSS作爲大小的例子。嘗試使用寬度，線條高度和邊框半徑進行遊戲 – Jahmic 2015-12-07 14:42:37

這是一個非常酷的方式做到這一點還沒有被提及在這裏和幾行代碼中你是gtg。

i.fa-smile-o { 
position: relative; 
color: #555; 
} 

i.fa-smile-o:before { 
    content: "\f111"; 
    color: #f1c40f; 
} 

i.fa-smile-o:after { 
    left: 0; 
    top: 0; 
    position: absolute; 
    content: "\f118"; 
}

這種方式，您也可以填寫與MEH內容或皺眉，可以發現here碼，享受！

來源

2017-03-03 01:48:30

最簡單的將可能給列表項的背景顏色，像這樣

li { 
background-color: white; 
}

來源

2018-01-04 09:12:29

如何給字體真棒圖標背景顏色？

回答

相關問題