Plugin/FontAwesome の変更点

九州産業大学 情報科学研究科


#author("2020-01-08T17:39:29+09:00","default:staff","staff")
#author("2020-01-14T14:00:36+09:00","default:staff","staff")
*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!
~
~