- 追加された行はこの色です。
- 削除された行はこの色です。
#author("2019-12-22T10:02:25+01:00","default:inoue.ko","inoue.ko")
*PluginFontAwesome
fontawesome.io の iconフォントを使用するためのプラグイン
#author("2019-12-22T19:02:55+09:00;2019-12-22T18:44:29+09:00","default:inoue.ko","inoue.ko")
*FontAwesome
fontawesome.io が提供する Free Icon フォントを使用するためのプラグイン
http://fontawesome.io/examples/
~
***format
&fontawesome(fas fa-home);
&color(red){&fontawesome(fas fa-home);};
-引数 fontawesome で提供されるアイコンの class名
CENTER:
&size(72){&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/]] [[&fontawesome(fab fa-twitter); >https://twitter.com/]] [[&fontawesome(fab fa-facebook); >https://www.facebook.com/]] ← Click!
**書式
&fontawesome( アイコンの class名 );
fontawesome で提供されているアイコンの「class名(後述)」を指定します。
-以下のサイトでアイコンのクラス名を確認できます。
-以下のサイトにあるフリーアイコンを使用することができます。
https://fontawesome.com/icons?d=gallery&m=free
~
-HTML埋め込み用に以下のようなコードが提供されています。
-アイコンを選択すると、埋め込み用に以下のようなコードが提供されます。
<i class="fas fa-home"></i>
クラス名( fas fa-home )の部分のみ抜き出してご利用下さい。
-クラス名( ''fas fa-home'' )の部分のみを抜き出して、以下のように記述して下さい。
&fontawesome(fas fa-home);
記号の意味は以下のとおりです。
-記号の意味は以下のとおりです。
--Fas:Font Awesome Solid
--Fad:Font Awesome Brand
~
~
***sample
&fontawesome(fas fa-home); &color(red){&fontawesome(fas fa-home);};
**サンプル
&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!
~
~