resize the content property's image

Question

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:

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

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

Answer 1

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!

Answer 2

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.