FontAwesome でアイコンを組み合わせ

概要

FontAwesome でアイコンを組み合わせてみます

サンプル

サッカー禁止

<div class="fa-stack fa-lg">
  <i class="fa fa-ban fa-stack-1x" style="font-size:10em;"></i>
  <i class="fa fa-soccer-ball-o" style="font-size:3em;margin-left: 50px;"></i>
</div>

三重回転

spinner をネストさせつつ fa-spin で回します

<div class="fa-stack fa-lg">
  <i class="fa fa-spinner fa-spin fa-stack-1x" style="font-size:3em;margin-left: 10px"></i>
  <i class="fa fa-spinner fa-spin fa-stack-2x" style="font-size:2em;margin-left: 20px"></i>
  <i class="fa fa-spinner fa-spin" style="font-size:1em;margin-left: 30px;"></i>
</div>

サッカー

marquee タグで soccer-ball-o を往復させつつ、両サイドに child をおいて サッカーボールを蹴りあっているかのように見せる。

<i class="fa fa-child" style="font-size:5em;margin-left: 30px"></i><marquee behavior="alternate" width="25%" direction="right" scrollamount="10">
  <i class="fa fa-soccer-ball-o fa-spin" style="font-size:1em;"></i>
</marquee><i class="fa fa-child" style="font-size:5em;"></i>