fontawesomeを使ったハーフスターアイコンを作り方

fontawesomeを使ったハーフスターアイコンを作り方



Webアイコンフォントのfontawesomeで、このような半分は黄色で半分はグレーのハーフスターアイコンを作りたいな、と。

そこで真っ先に思い浮かぶのが、



を「Stacked Icons」で重ねて使う方法です。

Font Awesome Examples
参考
Font Awesome Examples

複数のアイコンを重ねるfa-stackには、親のクラス、等fa-stack-1x サイズのアイコン、およびfa-stack-2x大きいアイコンのクラスを使用します。fa-inverse 代替のアイコンの色として使用できます。サイズ調整をさらに細かく制御するために、親に大きなアイコンクラスをスローすることもできます。

Font Awesome Examples

しかし、実際試してみると・・・

<span class="fa-stack fa-5x">
  <i class="fa fa-star fa-stack-1x" style="color:gray;"></i>
  <i class="fa fa-star-half fa-stack-1x" style="color:orange;"></i>
</span>

となり、中心が揃いません。

そこで、改めて合成用のクラスを作成します。

HTML

<span class="fa-mixed">
  <i class="fa-under fa fa-star fa-5x" style="color:gray;"></i>
  <i class="fa-over fa fa-star fa-5x" style="color:orange;"></i>
</span>

CSS

.fa-mixed {
  position: relative;
  display: inline-block;
}
.fa-under {
  vertical-align: top;
}
.fa-over {
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  overflow: hidden;
}

.fa-overwidthの%を変更することで、細かなオーバー部分の範囲を調整することが可能です。

Font awesome percentage width stacked icon
参考
Font awesome percentage width stacked icon

フォントの素晴らしいパーセンテージ幅積み上げアイコン

Font awesome percentage width stacked icon Stack Overflow

今日はここまで

関連する記事



こちらはいかが?


1 件のコメント

コメントを残す