web-dev-qa-db-fra.com

Comment donner une couleur d'arrière-plan à une icône de police géniale?

Dans le pied de page de cette page http://128.199.58.229/landingpage/

J'ai quelques icônes de police impressionnantes (icônes de médias sociaux).

J'essaie de leur donner un fond blanc juste derrière les icônes elles-mêmes. Le fond blanc est actuellement visible. J'ai lu des articles sur l'utilisation d'une combinaison de largeur, hauteur et rayon de bordure pour y parvenir, mais aucun succès à ce jour.

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

Voici un jsfiddle: http://jsfiddle.net/magician11/nfz9sucn/1/ Je cherche juste le blanc derrière le symbole: https://dl.dropboxusercontent.com/u /14057353/Screen%20Shot%202014-12-03%20at%204.01.18%20pm.png

Quelqu'un sait comment résoudre ce problème? Merci.

csscss3font-awesome
14
magician11

Utilisez icônes empilées à la place. Voici un violon , vous pouvez jouer avec pour le rendre encore meilleur. Ci-dessous le code complet:

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

Je suis surpris que personne n'ait encore mentionné cette approche:

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

Je cherchais la solution, mais je n’ai pas trouvé la solution parfaite avec moins de code; je passe donc peu de temps et réalise ce fiddle pour vous.

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

Vous devrez peut-être jouer avec un rayon de bordure, une hauteur de ligne et des marges, mais je pense que c'est une solution bien ajustée et plus rapide.

Faites-moi savoir s'il y a une erreur!

1
Kartic

Le plus simple sera probablement de donner à l’élément de la liste une couleur de fond comme

li {
background-color: white;
}
0
Sandip Shrestha

Voici un moyen vraiment sympa de le faire qui n’a pas été mentionné ici et dans quelques lignes de code, vous êtes 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";
}

De cette façon, vous pouvez également remplir le contenu avec des codes meh ou froncement de sourcils qui peuvent être trouvés ici , profitez-en!

0
Juan Pablo Ugas