はじめに
レビューや評価表示で使われるスターアイコンを、デフォルトの「星」から「ハート」へとカスタマイズします。
サイトの雰囲気やブランドイメージに合わせてアイコンを変更することで、よりかわいらしく親しみやすいデザインに仕上げることができます。
この記事では、この方法について説明します。
完成イメージ
実装手順
以下のコードをstyle.cssに追加します。
.fa-star::before,
.fa-star-half-alt::before,
.fa-star-half-alt::after {
content: '\f004';
font-size: 50px;
}
/* Solidアイコンを半分は重ねる */
.fa-star-half-alt::before {
display: block;
overflow: hidden;
position: absolute;
width: 0.5em;
}
/* Regularアイコン */
.fa-star-half-alt::after {
font-weight: 400;
}解説
ハートアイコンとした場合、星アイコンと異なり、Haltアイコンがありません。
そこで、Regularアイコンの上にSolidアイコンを横幅の半分だけ重ねることで、Halfアイコンを実現します。
| 状態 | class | 星 | ハート |
|---|---|---|---|
| Solid | fas.fa-star | ||
| Regular | far.fa-star | ||
| Half | fas.fa-star-half-alt | + |
応用：アイコン背景をグレー表示する方法
例えば、コーヒーアイコンにはSolidアイコンしかありません。
そのため、背景にグレーのアイコンを表示し、最大評価点を明確にします。
完成イメージ
実装手順
以下のコードをstyle.cssに追加します。
.fa-star::before,
.fa-star-half-alt::before,
.fa-star-half-alt::after {
content: '\f0f4';
font-size: 50px;
font-weight: 900;
}
/* Solidアイコンを半分は重ねる */
.fa-star-half-alt::before {
display: block;
overflow: hidden;
position: absolute;
width: 0.5em;
}
/* アイコン色をグレー */
.fa-star-half-alt::after,
.far.fa-star {
color: #f0f0f0;
}さいごに
今回紹介した方法を使えば、評価スターのアイコンを自由にカスタマイズできます。
ハートやコーヒーアイコンのほかにも、好きなアイコンに変更して、デザインの統一感を高めてみてください。
