Police Génial couleur d'arrière-plan

Lors de l'utilisation de la brillante de la Police Génial, comment puis-je rendre les icônes n'est pas transparent - par exemple si je veux utiliser http://fortawesome.github.io/Font-Awesome/icon/chevron-circle-up/, mais pas le "haut" dans le cercle noir être transparente, mais de couleur unie (blanc)?

Merci!

OriginalL'auteur John Anderson | 2014-10-22

  1. 26

    Malheureusement, l'ensemble de l'icône est considéré comme un seul "personnage" sur la page et en tant que tel, vous n'avez pas que granulaire de contrôle. Vous pouvez tout simplement mis une seule "couleur" de la propriété pour définir la couleur du personnage/l'icône pour être ce que vous voulez.

    Maintenant, il est possible pour un créatif hack. Depuis le milieu du personnage est transparent, vous pouvez définir une couleur de fond derrière le personnage, il apparaît que le milieu est d'une couleur différente, en faisant quelque chose comme ceci:

        <i class="fa fa-chevron-circle-up"></i>

    puis dans votre CSS:

    .fa-chevron-circle-up {
  background: yellow;
  border-radius: 50%;
  height: 1em;
  width: 1em;
}

    Si l'arrière-plan du cercle des décalages de l'icône, vous pouvez utiliser line-height pour le fixer.

    N'importe quoi avec un cercle noir qui est un brillant moyen pour obtenir un BG de couleur au milieu d'elle.
    Brillant en effet, merci.

    OriginalL'auteur Kyle Goode

  2. 31

    vous pouvez utiliser fa-pile avec la fa-icône en forme de cercle sous les autres d'avoir un meilleur contrôle sur le pixel juste à la frontière:

    <span class="fa-stack">
    <i class="fa fa-circle fa-stack-1x icon-a"></i>
    <i class="fa fa-times-circle fa-stack-1x icon-b"></i>
</span>

    avec: 

    .icon-a {
    color: #FFF;
    font-size: 0.9em;
}
.icon-b {
    color: #000;
}
    Cela a bien fonctionné pour moi et semble être un non-hack solution
    Pourquoi avez vos règles CSS ont des guillemets autour des noms de propriétés et de valeurs?
    Je ne me souviens pas, peut-être une erreur lors du collage, de la supprimer.

    OriginalL'auteur xavier bs

  3. 8

    J'ai un autre hack pour les gens qui sont toujours intéressés:

    <i class="fa fa-chevron-circle-up fa_with_bg"></i>

    Et le css:

    .fa_with_bg{
    position: relative;
}

.fa_with_bg::after{
    position: absolute;
    content: '';
    background: #fff;
    z-index: -1;
    top: 10px;
    left: 3px;
    width: 35px;
    height: 33px;
}

    Vous suffit d'ajouter le fa_with_bg de classe à elle.

    * Vous pouvez avoir à jouer un peu avec le top,left,width et height propriétés.

    Ne fonctionne pas pour moi. Pour le faire fonctionner j'ai changé votre css légèrement: j'ai donné l' ::avant que l'ombre élément position: relative; z-index: 1; et a donné l' ::après élément, un z-index de 0.
    Cela a fonctionné pour moi, en particulier lors de l'ajout d'un border-radius pour s'adapter à l'arrière de mon chevron-icône en forme de cercle

    OriginalL'auteur OmerSch