Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Any fancy trickery to fix a background colour on SVG

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #39879
    DBirkett
    Member

    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?

    #110233
    nwalton
    Participant

    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;
    }
    #110255
    DBirkett
    Member

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.