FontAwesome応用編

前提Font Awesomeをもっと色々適用したい

Font Awesomeは実に便利です。画像をわざわざ探さなくてもモダンで、また標準的なアイコンを自由に使う事ができます。 (まだフォーラムに書かないからこの表記で)"某文芸サイト"が使用するCSSにはこのFont Awesome(ver.4.3.0)が既にimportされている為、この素晴らしいアイコンを自由に使う事ができます。

しかし、このFont Awesomeの標準的な使い方、例えば

[[span class="fa fa-angellist"]]@<&nbsp;>@[[/span]]

だけでは自由にFont Awesomeを使えないものがあります。それは[[collapsible]]等のギミックが含まれたWikidot構文です。

例えば下のコードを書いた場合、構文エラーとなってしまいます。

コード:

[[collapsible show="[[span class='fa fa-angle-double-down']]open[[/span]]" hide="close"]]
 aaaaaaa
[[/collapsible]]

表示:

もしかしたら上のコードを見て、「何Wikidot素人クサイ事やっているんだ、Wikidotにおける属性の指定はシングルクォーテーション(')じゃなくてダブルクオーテーション(")だろ」と思う方がいらっしゃるかも知れません。おっしゃる事はごもっともです。しかし、もう1度上のコードを見てください。ダブルクォーテーションしか使えないのならばそれこそ通常の方法では折り畳みブロックにFont Awesomeが使えない事がわかるでしょう。

今回はこうしたギミックを持つ要素にFont Awesomeを適用する方法をお伝えします。

折り畳みにFont Awesomeをつける

折り畳み文章の展開/格納をアイコンで示す事によってスペシャルな折り畳みを演出する事ができます。

サンプル

コード

[[div class="special-collapsible"]]
[[collapsible show="隠された文章を開く" hide="閉じる"]]
折り畳み文章よ
[[/collapsible]]
[[/div]]
 
[!-- CSS --]
[[module css]]
/*using font-awesome4.3.0*/
.special-collapsible .collapsible-block .collapsible-block-folded .collapsible-block-link:before,
.special-collapsible .collapsible-block .collapsible-block-unfolded .collapsible-block-unfolded-link .collapsible-block-link:before
{
    /*font-awesome fa*/
    display:inline-block;
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    transform:translate(0, 0);    
}
 
.special-collapsible .collapsible-block .collapsible-block-folded .collapsible-block-link:before{
/*fa-angle-double-down*/
content:"\f103";
}
.special-collapsible .collapsible-block .collapsible-block-unfolded .collapsible-block-unfolded-link .collapsible-block-link:before{
/*fa-angle-double-up*/
content:"\f102";
}
[[/module]]

ファイルオープン型 タブビュー

ファイルアイコンをつける事でタブビューをよりシステマチックに見せる事が可能になります。

サンプル

ファイルが欠損しています。別のファイルを参照してください。

コード

[[div class="flieNav"]]
[[tabview]]
[[tab ファイルA]]
ファイルが欠損しています。別のファイルを参照してください。
[[/tab]]
[[tab ファイルB]]
そうです。それは鮫[ファイルが欠損しています]
[[/tab]]
[[tab ファイルC]]
鮫が空より降る。チェーンソー。あれ?映画の序盤で食われた手と鮫の腹から出てきた手違くね?
[[/tab]]
[[/tabview]]
[[/div]]
[!-- module css --]
[[module css]]
 
.flieNav .yui-navset .yui-nav > li > a em:before{
 content:"";
    /*font-awesome fa*/
    font:normal normal normal 14px/1 FontAwesome;
    transform:translate(0, 0);
    display:inline-block;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
 
}
.flieNav .yui-navset .yui-nav > li > a em:before{
    /*folder*/
    content:"\f07b";
}
.flieNav .yui-navset .yui-nav > .selected > a em:before{
    /*folder-open*/
    content:"\f07c";
}
 
[[/module]]

基本的な考え方

Font AwesomeのアイコンはCSSによってつけます。じゃあ「任意の要素にFont Awesomeと同じCSSをつければそれらにもFont Awesomeを適用できるのではないか?」という理屈です。

またcollapsibleの折り畳みボタン等にはspan等の要素を入れる事はできないので、「ならbefore等の疑似要素をつけてFont Awesomeのアイコンを表示する領域を確保しよう」という考えも使っています。

共通設定:faを定義する

fontawesome、つまりFont Awesomeのアイコンを使用する際に重要になるのはfont設定です。ですからFont Awesomeのアイコンを表示する要素には下記のCSS設定が必要になります。

font:normal normal normal 14px/1 FontAwesome;

これがfontawesomeのfontを適用する設定となります。

またFonw Awesomeのfaクラスにはアイコンを綺麗に表示する為に必要な設定がつまっていますのでFont Awsomeを表示する疑似要素には以下のCSSをまるっと貼りつけてしまいしょう。

/*hogehogeというクラスの前にfontawesomeのアイコンを表示する場合*/
.hogehoge:before{
 content:"";
    /*font-awesome fa*/
    font:normal normal normal 14px/1 FontAwesome;
    transform:translate(0, 0);
    display:inline-block;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

CSSの中身は上のコードをコピペすれば大丈夫です(もちろん、クラス名等は各自ユーザの必要なものに書き換えてください)。

アイコンを設定する

次に表示するアイコンを設定しましょう。

まずはFont Awesomeの公式サイトを参照します。

公式サイト: Font Awesome

次に公式サイトのヘッダーにあるiconsをクリックしてアイコンの一覧を出しましょう。気に入ったアイコンが見つかったらそのアイコンをクリックしてください。

iconList.png

すると下の画面に飛びます。

stringCode.png

上の画像の赤枠部分に(16進数で)謎の数字が書かれていますね?これがそのアイコンの文字コードです。この文字コードを疑似要素(beforeやafter等)に適用すれば、該当のFont Awesomeのアイコンを表示する事ができます。

.hogehoge:before{
content:"\f188";
}

実践編:ちょっとやってみよう

前章で選んだアイコン、bugの文字コードは"f188"です。これを表示してみましょう。

今回はhogehogeというクラスの前にこのaddress-bookを表示する事にします。

まずは「共通設定:faを定義する」で説明したコードを適用させます。

/*hogehogeというクラスの前にfontawesomeのアイコンを表示する場合*/
.hogehoge:before{
 content:"";
    /*font-awesome fa*/
    font:normal normal normal 14px/1 FontAwesome;
    transform:translate(0, 0);
    display:inline-block;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

次に、このhogehoge:beforeのcontent(格納する文字)を設定します。ここで公式サイトで見つけた文字コードを使用します。

/*hogehogeというクラスの前にfontawesomeのアイコンを表示する場合*/
.hogehoge:before{
 content:"";
    /*font-awesome fa*/
    font:normal normal normal 14px/1 FontAwesome;
    transform:translate(0, 0);
    display:inline-block;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.hogehoge:before{
content:"\f188";
}

もちろん最初にfaをコピペ貼りつけたCSSのクラスに直接"\f188"を設定してもかまいません。しかし、これはCSSに慣れないと中々理解するのが難しいの詳細は割愛しますが、collapsibleやtabviewのボタンは状態に応じて複数種のデザインパターンが適用されます。その状態に応じて表示するアイコンを変えたい場合、いちいちその状態のデザインを設定するCSSにfaのCSSコードを書くのは面倒くさいので、faのCSSコードは全状態の共通コードとして扱い、アイコンの内容そのものは個別のコードとして扱いやすくする為に、上記の様に設定を分割して書きます。

何度か自身の手で試してみればそのうちわかるかと思います。

さて、文章の前にbugを表示するクラス、hogehogeの設定が終わりました。では実際にページ書いてみましょう。

> **[[span class="hogehoge"]]バグが見つました[[/span]]**
>

さぁ、ちゃんとできたかドキドキですね!では結果を見て見ましょう。

ちゃんとできましたね!

また、アイコンの色だけ変えてあげるとまた一味違った演出ができます。

/*hogehogeというクラスの前にfontawesomeのアイコンを表示する場合*/
.hogehoge:before{
 content:"";
    /*font-awesome fa*/
    font:normal normal normal 14px/1 FontAwesome;
    transform:translate(0, 0);
    display:inline-block;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.hogehoge:before{
content:"\f188";
color:#3A4;
}

さぁこれで皆さんもWikidotの標準機能にちょっとした彩をつけてみましょう!皆様の表現の幅が広まれば幸いです。

バージョンに注意しよう

各アイコンのページを開くと、下画像の赤枠部分に

stringCode2.png

Added: Version 3.2

という記述があります。これはそのアイコンがFont Awesomeのどのバージョンで設定されたものかを示すものです。

SCP財団に適用されているFont Awesomeのバージョンは4.3.0なので、これ以降に追加されたアイコン(アイコンのAddedが4.3より大きいもの)は使用できません。もちろん、ご自身の手で最新バージョンのFont Awesomeをインポートした場合はその限りではありません。また、Font AwesomeにはProバージョンと言って有料のアイコンもありますが、これらも使う事はできません。Font Awesomeのアイコンを使う際はご注意ください。

対象のクラス名を探すには

GoogleChromeの検証機能が便利です。

よくわからなかったら

collapsibleとtabviewに関しては本記事の「折り畳みにFont Awesomeをつける」と「ファイルオープン型 タブビュー」のコードをコピペしてください。

アイコンを変えたい場合はCSSにある。

content:"\f102";

という記述の文字コードを自分の好きなアイコンの文字コードに置き換えてください。

特に指定がない限り、このサイトのコンテンツには次のライセンスが適用されます: Creative Commons Attribution-ShareAlike 3.0 License