fontawsomeでお手軽バッジ
バッジを使うことは意外と多い。
特にネットショップの場合はランキングを表示することがほとんどで、その順位を表すのにバッジがよく使われる。
今までは画像でバッジを作っていたのだが、今回はfontawsomeでバッジを作ってしまおう。
やり方は、ピクトグラムと同じだ。
バッジを動かす
fontowsomeから適当な文字を選び、表示させる。
強調するために、アニメーションさせる。
<div class="amiens-badge">
<i class="fas fa-certificate faa-pulse animated"></i>
<p id="amiens-free">初回
無料</p>
</div>
css
.amiens-badge{
font-size: 2000%;
color: #fc0;
}
#amiens-free{
color: white;
font-family: sans-serif;
font-size: 70px;
line-height: 1.2em;
position: relative;
top:-320px;
left:80px;
transform:rotate(-15deg);
}
中に入れる文字を少し傾けてみた。
バッジっぽくなったかな。
