Plugin/FontAwesome の変更点

九州産業大学 生命科学部


#author("2019-12-22T19:02:55+09:00;2019-12-22T18:44:29+09:00","default:inoue.ko","inoue.ko")

#author("2020-01-14T05:46:06+01:00;2020-01-14T05:20:09+01:00","default:inoue.ko","inoue.ko")

*FontAwesome 
fontawesome.io が提供する Free Icon フォントを使用するためのプラグイン
http://fontawesome.io/examples/

http://fontawesome.io/

~
CENTER:
&size(72){&fontawesome(fas fa-home);};
~

**書式
 &fontawesome( アイコンの class名 );
fontawesome で提供されているアイコンの「class名(後述)」を指定します。

-以下のサイトにあるフリーアイコンを使用することができます。
https://fontawesome.com/icons?d=gallery&m=free
&color(red){当サイトで利用できるのは、5.12.0(2020.01)以前のものに限られます};


-アイコンを選択すると、埋め込み用に以下のようなコードが提供されます。
 <i class="fas fa-home"></i>
-クラス名( ''fas fa-home'' )の部分のみを抜き出して、以下のように記述して下さい。
 &fontawesome(fas fa-home);
-記号の意味は以下のとおりです。 
--Fas:Font Awesome Solid
--Fad:Font Awesome Brand
~
~

**サンプル
 &fontawesome(fas fa-home);
&fontawesome(fas fa-home);

-事例:このサイトのヘッダー部分に使用しています。
[[SocialIcon]]
~
~

**応用
***アイコンに色をつけるには
以下のように &color(); プラグインと併用して下さい。
 &color(red){&fontawesome(fas fa-home);};
&color(red){&fontawesome(fas fa-home);};
~

***アイコンにリンクを設定するには
以下のように [ [ アイコン>リンク先 ] ] のリダイレクト表記で実現できます。
 [[&fontawesome(fab fa-instagram);>http://www.example.com/]]
-[[&fontawesome(fab fa-instagram);>https://www.instagram.com/explore/tags/%E4%B9%9D%E8%8A%B8/]] ← Click!
-[[&fontawesome(fab fa-twitter);>https://twitter.com/]] ← Click!
-[[&fontawesome(fab fa-facebook);>https://www.facebook.com/]] ← Click!
~
~