更改PrimeFaces p：rating的图标？

debugcn 发表于 Dev

辛达·莫卡迪姆（Sinda MOKADDEM）

我想更改p:rating..的形状，并显示圆形或正方形或其他任何形式，而不是星星。是否有可能。也许通过CSS？

Hatem Alimam

你有两个选择

选项1

您需要创建自己的图标，基本上这些图标位于一个精灵图像中：

原始图像

因此，在您的情况下，您可以通过替换每个图标来实现自己的示例，例如：

在此处输入图片说明

然后在CSS中用新的背景替换背景：

div.ui-rating-star a, div.ui-rating-cancel a {
  background-image: url("#{resource['images/icon/myrating.png']}");                       
}

在线演示

如何创建这样的精灵

转到http://spritepad.wearekiss.com/

选择

改变大小

然后

创建图标15x15px 像这样

拖放到垫上

选项2

真棒字体或任何其他CSS字体

<p:rating styleClass="awesome-rating" />

如果字体很棒，则需要添加此CSS片段

.awesome-rating .ui-rating-star, .awesome-rating  .ui-rating-cancel {
    float: initial;
    display: inline;
}

.awesome-rating .ui-rating-star a, .awesome-rating  .ui-rating-cancel a {
    background: none;
    width: initial;
    height: initial;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #e6e6e6;
    margin-right: 5px;
    font-size: 30px;
    display: inline;
}

.awesome-rating  .ui-rating-cancel a:before {
    content: "\f056";
}

.awesome-rating  .ui-rating-cancel.ui-rating-cancel-hover a {
    color: #ce1c18;
}

.awesome-rating .ui-rating-star a:before {
    content: "\f006";
}

.awesome-rating .ui-rating-star.ui-rating-star-on a {
    color: #fadc3e;
}

.awesome-rating .ui-rating-star.ui-rating-star-on a:before {
    content: "\f005";
}

您可以:before使用图标内容代码更改内容，这是完整列表

看更多：