java 具有特定图标大小的 commandLink Primefaces/jsf

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/26827821/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-11-02 10:42:34  来源:igfitidea点击:

commandLink with specific icon size Primefaces/jsf

javacssjsfprimefaces

提问by xav56883728

I'm trying to set an specific size for my icons because the predefined is seted to 16x16 and is to small, but this no work.

我正在尝试为我的图标设置特定大小,因为预定义设置为 16x16 并且很小,但这不起作用。

<p:commandLink id="trash" styleClass="ui-icon ui-icon-trash myIconsSize"/>

CSS:

CSS:

.myIconsSize {
width:32px;
height:32px;
}

Version:

版本:

Primefaces 5.1

Primefaces 5.1

采纳答案by xav56883728

Primefaces uses his own sprite for the icons:

Primefaces 使用他自己的 sprite 作为图标:

primefaces-5.1.jar
META-INF/resources/primefaces-aristo/images/ui-icons_616161_256x240.png

You can't set the size of the icon image on this case because is an sprite.

您无法在这种情况下设置图标图像的大小,因为它是精灵。

You need your own sprite with your predefined icons and sizes.

您需要具有预定义图标和大小的精灵。

Example:

例子:

CSS:

CSS:

.si-icon-16x16 {
width: 16px;
height: 16px;
background-image: url('../images/sprites/sprite.png');
background-repeat: no-repeat;
display: block;
overflow: hidden;
text-indent: -99999px;
}

/*your icon position on the sprite*/
.si-icon-send {
background-position: -20px -328px;
}

JSF:

JSF:

<p:commandLink id="send" styleClass="si-icon-16x16 si-icon-send"/>

Another solution is use a separated image for every commandLink and set the size what you want. The other solutions explains this.

另一种解决方案是为每个 commandLink 使用单独的图像并设置您想要的大小。其他解决方案解释了这一点。

回答by Brother

You can use graphicImagebetween .

您可以使用graphicImage的之间。

Try this:

试试这个:

<p:commandLink id="trash">
    <h:graphicImage name="images/your_image.jpg" width="32" height="32"/>
</p:commandLink>

回答by siva636

There seems to be no way of giving a CSS style directly to the icon you specified. But you may achieve what you are trying to do using your own image with the following style:

似乎无法直接为您指定的图标提供 CSS 样式。但是,您可以使用以下样式的自己的图像来实现您想要做的事情:

.myIconsSize {
       background-image: url("images/your-own-image.png");
}