treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Forums

Illustration by Nick Sirotich

Any fancy trickery to fix a background colour on SVG

  • DBirkett
    Permalink to comment #

    I am using a font-face created on IcoMoon for a project, and have run into an issue.

    The background that the icon will sit on is a dark grey #333, and the icon is going to be blue. However, I want to have the "F" in white.

    Screenshot here: https://lh5.googleusercontent.com/-GE8OY5-tHpM/UFM35MAN44I/AAAAAAAABsA/HMS6aEtfUSg/w497-h373/fb-svg.jpg

    background-color on the icon affects the entire area, so you get a square block of white. I have also tried text-shadow inset, but haven't got anywhere.

    Any ideas, is it even possible with it being a flat image?

  • nwalton
    Permalink to comment #

    If the icon is transparent (which I'm assuming), you should be able to use generated content to add a white background behind it. Something like this:

    
.myImage {
  position:relative;
  z-index:2;
}
.myImage:before {
  content: " ";
  position: absolute;
  background-color: white;
  width: 17px;
  height: 30px;
  top: 10px; /* whatever positions it correctly */
  left: 10px; /* whatever positions it correctly */
  z-index: 1;
}
  • DBirkett
    Permalink to comment #

    Thanks a lot. I played around with .icon-facebook and .icon-facebook:before but didn't get much joy. I ended up placing it in a div, with a class of bg. I'm sure that I could do this much neater - but this worked for me:

        .icon-bg {
    width: 1em;
    height: 1.1em;
    background-color: white;
    z-index: 1;
    }

    .icon-facebook:before {
     z-index: 2;
     content: "\37";
     position: relative;
    top: -16px;
    left: -7px;
    }

    Thanks again.

Add a Comment