Now Loading...

2018年01月23日

Twemoji Awesome を使う

Twemoji Awesomeを使ってみましょう。


絵文字スタイルは
twemoji-awesome.cssで定義されています。

fa- fa-*を使うFont Awesomeのように、
Twemoji Awesomeはクラス名に
twa-*を使います。

Font Awesomeのように、
twa-lg、twa-2x、twa-3x、
twa-4x、twa-5x、
で絵文字サイズを変更できます。

Twemoji AwesomeはSVG画像を
background-image画像として使用し、
一部のブラウザはこれをサポートしていません。



 <i class="twa twa-1f340"></i>

 twa-lg <i class="twa twa-lg twa-2728"></i>

 twa-2x <i class="twa twa-2x twa-1f423"></i>

 twa-3x <i class="twa twa-3x twa-1f4f8"></i>

 twa-4x <i class="twa twa-4x twa-1f4a9"></i>

 twa-5x <i class="twa twa-5x twa-2603"></i>




Check demo page

デモページの数字は
Unicodeになります(たぶん)

デモページは表示に時間が掛かったり、
エラーになる事があります。




ここからのお話は全て非公式です。
ご利用になられる場合は全て自己責任でお願いいたします。


CDN コード (わたしが勝手に探したもので公式に発表されていません)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/twemoji-awesome@2.0.0/dist/twemoji-awesome.min.css">


Font Awesome と
Font Awesome Animation
css 定義がそのまま使えます



  Font Awesome の90度傾ける<i class="twa twa-1f47a fa-rotate-90"></i>

  Font Awesome のスピン<i class="twa twa-1f4ab fa-spin"></i>

  Font Awesome Animationn の点滅<i class="twa twa-2728 faa-flash animated"></i>

  Font Awesome Animation のバースト<i class="twa twa-1f4a5 faa-burst animated"></i>

  Font Awesome Animation のリバース<i class="twa twa-1f684 faa-passing-reverse animated"></i>

  Font Awesome Animation のパルス<i class="twa twa-1f48b faa-pulse animated"></i>



class名のanimated
animated-hoverに書き換えると、
アイコンにカーソルを
のせたとき(hover時)のみ
アニメーションが有効になります。

←カーソルを当ててね




親要素へのhover時に動かす





国旗などの絵文字も
充実しています。


カラーなのが
うれしいですね

こんな変わった物
もあります。



バレンタインの記事に使えそうですね。







節分の記事にいかがでしょうか。



ほんの一部ですが、
ご紹介いたしました。






タグ:日記
posted by きらら&ジュレ at 14:38| 2018 きらら&ジュレの日記