九州産業大学 情報科学研究科
#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! ~ ~