31

I have an unordered list of links and each link has a unique id.
I'm using that id with the :before selector to place
the associated website's favicon before the link (using the content property).
One of these icons is twice the size of the others.
Is there any way to change the size of this icon using CSS?
If the answer is no, is there any way to do this other than editing the image?

Visual reference:

enter image description here

Here is what I tried (and it doesn't seem to work):

#geog:before
{
    content: url("icons/geogebra.ico") " ";
    height: 50%;
    width: 50%;
}
Honest Abe
  • 8,430
  • 4
  • 49
  • 64
  • 1
    possible duplicate of [Can I change the height of an image in CSS :before/:after pseudo-elements?](http://stackoverflow.com/questions/8977957/can-i-change-the-height-of-an-image-in-css-before-after-pseudo-elements) – Michael Scheper Dec 29 '14 at 01:48

3 Answers3

61

I've run into the same problem before. Try this:

#geog:before
{
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    content: "";
    background: url("icons/geogebra.ico") no-repeat 0 0;
    background-size: 100%;
}

I'm sure you'll have to tweak those values, but that worked for me. Of course, this won't work if you can't set it as a background image for some reason. Best of luck to you!

David Vasquez
  • 1,163
  • 1
  • 15
  • 22
  • 1
    Here's a fiddle that shows a working example of my solution taken from the code I wrote. http://jsfiddle.net/CNETx/ I just grabbed an oversized checkmark off a google image search to illustrate the resizing. I will say I've never tried doing this with an .ico, so I don't know if that format has any strange behavioral issues that might be causing you trouble, but I suspect it should behave the same. Looking forward to hearing if this works for you! – David Vasquez Feb 08 '13 at 19:57
  • Note that this solution uses a _background_ image, rather than a _content_ image; also, the solution uses background-size, which is not supported by, you guessed it, IE8. – Erwin Wessels Feb 18 '14 at 14:52
  • This may be a workaround for many, but I would not consider it a proper solution because as soon as you put it in the background, you can no longer apply foreground effects to it, like shadows etc... It sure would be nice if width and height applied to the content. – Damian Green Dec 18 '15 at 06:23
11

I believe you are looking for the zoom property. Check this jsfiddle

Also you can add spacing with margin-right between the icon and the content of the element.

Plamen
  • 330
  • 2
  • 8
  • 1
    Thanks; it's definitely the clean and simple solution I was expecting. Interesting that it is considered "Non-standard". https://developer.mozilla.org/en-US/docs/Web/CSS/zoom – Honest Abe Feb 05 '16 at 18:10
  • Awesome! Thank you! This is what i am looking for! – Barani r Dec 28 '16 at 09:37
-6

Use PX instead of %

#geog:before
{
content: url("icons/geogebra.ico") " ";
height: 5px;
width: 5px;
}

Give that a try :-)

Joe Posorski
  • 7
  • 5