Как мне присвоить шрифт удивительный значок цвет фона?

Question

В нижнем колонтитуле для этой страницы 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

Любой знает, как это исправить? Спасибо.

Answer 1

Вместо этого использовать 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; 
} 

Answer 2

Я искал решение, но не нашел идеальный один с меньшим количеством кода, так что я потратить немного времени, и сделал это 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; 
} 

Вам, возможно, придется играть с некоторым радиусом границы, линии высоты и полей, но это хорошо подходит и быстрым решением, я считаю.

Дайте мне знать, если есть ошибка!

Answer 3

Я удивлен, что никто не упомянул этот подход еще:

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; 
    } 

Answer 4

Вот это действительно хороший способ сделать это, что не было упомянуто здесь и в парах строк кода вы 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"; 
} 

Таким образом, вы можете также заполнить содержимое с Мех или хмуриться коды, которые можно найти here, наслаждайтесь!

Answer 5

Легче будет, вероятно, чтобы дать элемент списка цвет фона, как так

li { 
background-color: white; 
}