- This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
Viewing 3 posts - 1 through 3 (of 3 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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?
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;
}
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.