#author("2022-07-06T04:29:04+09:00;2021-07-26T22:27:16+09:00","default:kanateko","kanateko")
#author("2025-07-02T03:01:44+09:00","default:kanateko","kanateko")
&tag(プラグイン,自作,追加);
#ref(fa.jpg,nolink,center,wrap,500x)
#contentsx
*Font Awesomeのアイコンを表示するプラグイン [#ke30fe8a]
#infobox(plugin){{
name=fa
ver=1.4
pukiwiki=1.5.3
update=2021-07-26
name = fa
ver = 2.0.0
pukiwiki = 1.5.4
update = 2025-06-30
}}
[[Font Awesome:https://fontawesome.com/]]のアイコンを表示するプラグイン。フリー版Font Awesome 5 (v5.15.3) での使用を想定。サイズ変更やアニメーションといったFont Awesomeのオプションも使用可能で、クラス名で指定するか、引数として設定することができる。
[[Font Awesome:https://fontawesome.com/]]のアイコンを表示するプラグイン。フリー版Font Awesome 6 (v6.7.2) での使用を想定。サイズ変更やアニメーションといったFont Awesomeのオプションも使用可能で、クラス名で指定するか、引数として設定することができる。
:このプラグインでできること|
--Font Awesomeのアイコンを表示する
---Solid、Regular、Brandsが使用可能
--Font Awesomeのオプションを設定可能
---SVG + JS系のオプションは使えない
--2つのアイコンを重ねて表示できる
--スタイルを設定可能
---color、background、text-shadowのみ
#box(label,label-style=full,title=このプラグインでできること){{
-Font Awesomeのアイコンを表示する
--Solid、Regular、Brandsが使用可能
-Font Awesomeのオプションを設定可能
--SVG + JS系のオプションは除く
-2つのアイコンを重ねて表示できる
-スタイルを設定可能
--color、background、filter、margin、padding、text-shadow、 transformに対応
-任意のクラスを追加可能
}}
#clear
*ダウンロード [#i62b3f12]
最新: [[GitHub>https://github.com/kanateko/pukiwiki-plugin]]
|~日付|~バージョン|~備考|h
|2021-07-26|1.4|#ul(1回のみ挿入するリスト用のスクリプトを少し整理)|
|2021-07-11|1.3|#ul(リストにアイコンを適用するオプションを追加)|
|~|1.2|#ul(2つのアイコンを重ねて表示するオプションを追加)|
|~|1.1|#ul(FAのクラスを引数として指定する機能を追加,color、text-shadow、backgroundを設定する機能を追加)|
|CENTER:100|CENTER:100||c
|2025-06-30|2.0.0|#ul(全面改修,"FontAwesomeのバージョンを6.7.2にアップデート,Beat, Fade, Beat-Fade, Bounce, Flip, Shakeなどのアニメーションに対応",animation関連のカスタムプロパティに対応,"filter, margin, padding, transformの指定を追加",任意のクラスの追加に対応)|
|2021-07-26|1.4.0|#ul(1回のみ挿入するリスト用のスクリプトを少し整理)|
|2021-07-11|1.3.0|#ul(リストにアイコンを適用するオプションを追加)|
|~|1.2.0|#ul(2つのアイコンを重ねて表示するオプションを追加)|
|~|1.1.0|#ul(FAのクラスを引数として指定する機能を追加,color、text-shadow、backgroundを設定する機能を追加)|
|2021-07-10|1.0|#ul(初版作成)|
*セットアップ [#ma9d057e]
+ダウンロードした「fa.inc.php」をpluginフォルダに入れる。
+pukiwiki.skin.phpの<head>～</head>の間に以下の内容を追加する。
#prism(php,false){{
<link href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" rel="stylesheet" >
}}
+pukiwiki.cssの下の方に以下の内容を追加する。
#prism(css,false){{
ul.fa-ul { list-style-type: none; }
}}
*プラグイン設定 [#x57d4f61]
:FA_ADD_CLASS|固定で追加するクラス。
:PLUGIN_FA_INSERT_CSS|FontAwesome用CSSをプラグイン側で読み込むかどうか。
:PLUGIN_FA_CSS|読み込むファイル/CDN。
:PLUGIN_FA_DEFAULT_STYLE|デフォルトの表示スタイル
:PLUGIN_FA_CLASS_FIXED|固定で追加するクラス。
*使用方法 [#c0927415]
&marker(blue){通常使用};
&fa([オプション]){クラス or アイコン名};
&marker(blue){リスト};
-&fa(li[,オプション]){クラス or アイコン名};リストの内容
&marker(blue){2つのアイコンを重ねる};
&fa(stack[,オプション]){&fa(1 or 2[,オプション]){クラス or アイコン名};&fa(1 or 2[,オプション]){クラス or アイコン名};};
**アイコン名とクラス名 [#f62b2532]
表示するアイコンは[[Font Awesome公式のアイコンリスト>https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free]]から好きなものを選び、アイコンの名前かクラスを{}の中に書く。クラスで指定する場合、半角スペースで区切ってオプション用クラスも一緒に指定することができる。
表示するアイコンは[[Font Awesome公式のアイコンリスト>https://fontawesome.com/search?ic=free]]から好きなものを選び、アイコンの名前かクラスを{}の中に書く。クラスで指定する場合、半角スペースで区切ってオプション用クラスも一緒に指定することができる。
#flex(menu,300,space-evenly){{
|CENTER:300|c
|&ref(name.jpg);&br;アイコンの名前|
#-
|CENTER:300|c
|CENTER:&ref(class.jpg);&br;アイコンのクラス|
}}
**Font Awesome関連のオプション [#vdbe4db4]
#style(class=table_float_right table_compact){{
|CENTER:300|c
|&ref(option.jpg);&br;公式ドキュメント|
}}
各オプションを引数またはクラスで指定できる。クラスで指定する場合は、アイコンのクラスの後に半角スペースを空けて追加する。クラス指定方法の詳細は[[公式ドキュメント:https://fontawesome.com/v5.15/how-to-use/on-the-web/styling/sizing-icons]]のStylingを参照。
各オプションを引数またはクラスで指定できる。クラスで指定する場合は、アイコンのクラスの後に半角スペースを空けて追加する。クラス指定方法の詳細は[[公式ドキュメント:https://docs.fontawesome.com/web/style/styling]]のStylingを参照。
#ac(all)
***アイコンのスタイル [#xe9351f0]
#ac(h){{{{{
Font Awesomeにはいくつかのスタイルがあり、フリー版で使えるのはSolid、Regular、Brandsの3種類。アイコンを指定する際には一緒にスタイルも指定する。ただしデフォルトでSolidのクラスを付与する様になっているため、Solidのアイコンを表示する場合は指定しなくてもいい。Brandsのアイコンを表示する場合は指定を忘れずに。
&marker(green){引数};
solid, fas, s // Solid
regular, far, r // Regular
brands, fab, b // Brands
&marker(green){引数での指定とクラスでの指定};
// Solid
&fa(solid){heart};
= &fa(fas){heart};
= &fa(s){heart};
= &fa{fas fa-heart};
&fa(solid){smile};
= &fa(fas){smile};
= &fa(s){smile};
= &fa{fas fa-smile};
// Regular
&fa(regular){heart};
= &fa(far){heart};
= &fa(r){heart};
= &fa{far fa-heart};
&fa(regular){smile};
= &fa(far){smile};
= &fa(r){smile};
= &fa{far fa-smile};
// Brands
&fa(brands){apple};
= &fa(fab){apple};
= &fa(b){apple};
= &fa{fab fa-apple};
&marker(green){実際の見え方};
#flex(flex-start,60){{
CENTER:&fa(s,3x){heart};
CENTER:&fa(s,3x){smile};
Solid
#-
CENTER:&fa(r,3x){heart};
CENTER:&fa(r,3x){smile};
Regular
#-
CENTER:&fa(b,3x){apple};
Brands
}}
}}}}}
***サイズを変更する [#z67324f8]
#ac(h){{{{{
相対的なサイズを指定できる。
&marker(green){引数};
xs, sm, lg, 2x, 3x, ... 9x, 10x
&marker(green){引数での指定とクラスでの指定};
&fa(2x){tree}; = &fa{fas fa-tree fa-2x};
&marker(green){実際の見え方};
※基準のサイズが14pxの場合。赤色が基準。
#style(font-size:14px){{
&fa(xs){tree}; &fa(sm){tree}; &fa(color=tomato){tree}; &fa(lg){tree}; &fa(2x){tree}; &fa(3x){tree}; &fa(4x){tree}; &fa(5x){tree}; &fa(6x){tree}; &fa(7x){tree}; &fa(8x){tree}; &fa(9x){tree}; &fa(10x){tree};
}}
}}}}}
***アイコンの幅を固定する [#z9c32033]
#ac(h){{{{{
&marker(green){引数};
fw
&marker(green){引数での指定とクラスでの指定};
&fa(fw){biking}; = &fa{fas fa-biking fa-fw};
&marker(green){実際の見え方};
#flex(flex-start,80){{
CENTER:&fa(2x,r,background=skyblue){building}; &fa(2x,background=skyblue){biking};
固定なし
#-
CENTER:&fa(2x,r,fw,background=skyblue){building}; &fa(2x,fw,background=skyblue){biking};
固定あり
}}
}}}}}
***リストにアイコンを使う [#xc48c91a]
#ac(h){{{{{
リストの先頭にこのオプションを指定したプラグインを置くことで、リストのマーカーをアイコンに置き換えることができる。他のオプションとも併用可。クラスでの指定はできない。
&marker(green){引数};
li
&marker(green){引数での指定&color(lightgray){%%とクラスでの指定%%};};
-&fa(li){check-square};リスト 1
&marker(green){実際の見え方};
-&fa(li){check-square};リスト 1
-&fa(li){check-square};リスト 2
-&fa(li,r){square};リスト 3
}}}}}
***アイコンを回転させる [#u9024378]
#ac(h){{{{{
回転と反転を別々に設定できる。
&marker(green){引数};
90, 180, 270, horizontal, vertical, both
&marker(green){引数での指定とクラスでの指定};
&fa(180){chess-knight}; = &fa{fas fa-chess-knight fa-rotate-180};
&fa(horizontal){chess-knight}; = &fa{fas fa-chess-knight fa-flip-horizontal};
&marker(green){実際の見え方};
#style(style=text-align:center){{{
#flex(flex-start,90){{
&fa(2x){chess-knight};
通常
#-
&fa(90,2x){chess-knight};
90
#-
&fa(180,2x){chess-knight};
180
#-
&fa(270,2x){chess-knight};
270
#-
&fa(horizontal,2x){chess-knight};
horizontal
#-
&fa(vertical,2x){chess-knight};
vertical
#-
&fa(both,2x){chess-knight};
both
}}
}}}
}}}}}
***アニメーションを加える [#obb2c299]
#ac(h){{{{{
&marker(green){引数};
spin, pulse
spin, pulse, reverse (spin-pulse, spin-reverse),
beat, fade, beat-fade, bounce, flip, shake
&marker(green){引数での指定とクラスでの指定};
&fa(spin){spinner}; = &fa{fas fa-spinner fa-spin;
&fa(spin){sync}; = &fa{fas fa-sync fa-spin;
&marker(green){実際の見え方};
#flex(flex-start,60){{
CENTER:&fa(spin,3x){spinner};
#flex(flex-start,80,class=align-center){{
&fa(spin,3x){sync};
spin
#-
CENTER:&fa(pulse,3x){spinner};
&fa(spin,reverse,3x){sync};
spin + reverse
#-
&fa(pulse,3x){spinner};
pulse
#-
&fa(pulse,reverse,3x){spinner};
pulse + reverse
#-
&fa(beat,3x){heart};
beat
#-
&fa(fade,reverse,3x){heart};
fade
#-
&fa(beat-fade,3x){heart};
beat-fade
#-
&fa(bounce,3x){basketball};
bounce
#-
&fa(flip,3x){snowflake};
flip
#-
&fa(shake,3x){bell};
shake
}}
}}}}}
カスタムプロパティにも対応。先頭の"--fa-"を抜き、「プロパティ = 値」の形で指定する。各種プロパティの詳細は[[公式ドキュメント:https://docs.fontawesome.com/web/style/animate]]参照。
例：&fa(3x,padding=20px,beat,beat-scale=1.5,animation-duration=6s){heart};
&fa(3x,padding=20px,beat,beat-scale=1.5,animation-duration=6s){heart};
***ボーダーとアイコンのフロート [#n6ad5a41]
#ac(h){{{{{
回り込みを解除する場合は#clearを置く。
&marker(green){引数};
border, left, right
&marker(green){引数での指定とクラスでの指定};
&fa(border){pencil-alt}; = &fa{fas fa-pencil-alt fa-border};
&fa(left){pencil-alt}; = &fa{fas fa-pencil-alt fa-pull-left};
&marker(green){実際の見え方};
#flex(flex-start,160){{
&fa(left,2x){pencil-alt};leftを指定した場合、アイコンはテキストの左側にフロートされます。
#-
&fa(right,border,2x){pencil-alt};rightを指定した場合は右側に。borderを指定するとアイコンに枠が表示されます。
}}
}}}}}
***2つのアイコンを重ねて表示する [#k20ffe97]
#ac(h){{{{{
引数でstackを指定すると、アイコンの代わりにコンテナを作成し、その中で指定されたアイコン2つを重ねて表示する。コンテナの方で他のオプションを指定した場合、両方のアイコンにオプションが反映される。
アイコンは後に指定された方が上に表示される。重ねるアイコンのうち、大きく表示する方の引数に '2' を、小さく表示する方には '1' を指定する。 また、 'inverse' を指定すると色を反転させて表示することができる。
&marker(green){関連する引数};
stack, 1, 2, inverse
&marker(green){使用例};
&fa(stack,3x){&fa(2,color=skyblue){square};&fa(1,inverse,b){twitter};};
一部はクラスでも指定可能
&fa(stack,3x){&fa(color=skyblue){fas fa-square fa-stack-2x};&fa{fab fa-twitter fa-stack-1x fa-inverse};};
&marker(green){実際の見え方};
&fa(stack,3x){&fa(2,color=skyblue){square};&fa(1,inverse,b){twitter};};
}}}}}
#ac(end)
**その他のオプション [#hb06cc27]
:color=xxx、text-shadow=xxx、background=xxx|
色、影、背景を設定可能。
:class=xxx|
任意のクラスを追加する。
:background=xxx、color=xxx、filter=xxx、margin=xxx、padding=xxx、text-shadow=xxx、transform=xxx|
CSSによるスタイル指定。値の書き方はCSSでの書き方に準ずる。
指定方法はCSSと同じ。
参考：
[[background - CSS: カスケーディングスタイルシート | MDN:https://developer.mozilla.org/ja/docs/Web/CSS/background]]
[[color - CSS: カスケーディングスタイルシート | MDN:https://developer.mozilla.org/ja/docs/Web/CSS/color]]
[[filter - CSS: カスケーディングスタイルシート | MDN:https://developer.mozilla.org/ja/docs/Web/CSS/filter]]
[[margin - CSS: カスケーディングスタイルシート | MDN:https://developer.mozilla.org/ja/docs/Web/CSS/margin]]
[[padding - CSS: カスケーディングスタイルシート | MDN:https://developer.mozilla.org/ja/docs/Web/CSS/padding]]
[[text-shadow - CSS: カスケーディングスタイルシート | MDN:https://developer.mozilla.org/ja/docs/Web/CSS/text-shadow]]
[[background - CSS: カスケーディングスタイルシート | MDN:https://developer.mozilla.org/ja/docs/Web/CSS/background]]
[[transform - CSS: カスケーディングスタイルシート | MDN:https://developer.mozilla.org/ja/docs/Web/CSS/transform]]
*使用例 [#e51bc32f]
**アイコンを表示してみる [#y6457e02]
&fa(r){comment}; &fa{ban}; コメントは禁止されています
&fa(r){comment}; &fa{ban}; コメントは禁止されています
**2つを重ねてみる [#vdb56cd2]
&fa(stack){&fa(1,r){comment};&fa(2){ban};};コメントは禁止されています
&fa(stack){&fa(1,r){comment};&fa(2){ban};};コメントは禁止されています
**少し大きくしてみる [#off4c25b]
&fa(stack,lg){&fa(1,r){comment};&fa(2){ban};};コメントは禁止されています
&fa(stack,lg){&fa(1,r){comment};&fa(2){ban};};コメントは禁止されています
**色を付けてみる [#q5027865]
&fa(stack,lg){&fa(1,r){comment};&fa(2,color=#ff6347){ban};};コメントは禁止されています
&fa(stack,lg){&fa(1,r){comment};&fa(2,color=#ff6347){ban};};コメントは禁止されています
**影をつけてみる [#q9742158]
&fa(stack,lg,text-shadow=1px 1px skyblue){&fa(1,r){comment};&fa(2,color=#ff6347){ban};};コメントは禁止されています
&fa(stack,lg,text-shadow=1px 1px skyblue){&fa(1,r){comment};&fa(2,color=#ff6347){ban};};コメントは禁止されています
*追加したい機能 [#ud342f39]
-特になし
*コメント [#tcd76a4f]
#pcomment(reply)
