调整内容属性的图像大小

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?

我有一个无序的链接列表，每个链接都有一个唯一的ID。我正在使用带有：before选择器的id在链接之前放置关联网站的favicon（使用content属性）。其中一个图标是其他图标的两倍。有没有办法用CSS改变这个图标的大小？如果答案是否定的，除了编辑图像之外，有没有办法做到这一点？

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

3 个解决方案

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

我相信你必须调整这些价值观，但这对我有用。当然，如果由于某种原因无法将其设置为背景图像，则无法使用此功能。祝你好运！

#2

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

我相信你正在寻找zoom属性。检查这个jsfiddle

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

您还可以在图标和元素内容之间添加带边距的间距。

#3

Use PX instead of %

使用PX代替％

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

Give that a try :-)

试一试:-)