更改 PrimeFaces p:rating 的图标？

Question

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

Answer 1

你有两个选择

选项 1

你需要创建自己的图标，基本上图标在一个sprite image：

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

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

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

online demo

如何创建这样的精灵

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

选择

然后

创建 15x15px 的图标

拖放到垫子

选项 2

Font-awesome 或任何其他 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 内容，这里是full list

查看更多：

• CSS Image Sprites。