Search code examples
css

resize the content property's image

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%;
}
Solution

  • 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!