jqMobiでスマートフォン向けページ作成(その4)

こんにちは、ニュービジネス推進部のYです！

今回はjqMobiで使われているアイコンを紹介します。
jqMobiではデフォルトで用意されたアイコンが57種類あります。
今回はどのような方法でアイコンが表示されるのかを紹介したいと思います。


jqMobiのアイコンは画像ファイルではなく、「TTF」ファイルを使用しております。
TTFファイルは「TrueTypeFont」の略であり、要するにPCで使うフォント形式です。
用意されたicons.ttfを呼び出すのは、icons.cssの一行目にある「@font-face」です。

@font-face {
    font-family: 'IcoMoon';
    src:url('icons.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

「font-family」では書体名を宣言します。icons.ttfの書体名は「IcoMoon」ですのでfont-familyで宣言しています。
「src」ではttfファイルを呼び、「format」は拡張子にあうフォーマットです。今回は「truetype」です。


続いて下にあります、「.icon .○○:before{content:'○';}」ですが
これがフォント指定にあたります。
例えばホームですと、「.icon.home:before{content:'!';}」となっており
この、「!」がicons.ttfのホームアイコン(家のマーク)になります。


TTFファイルの修正、追加方法はフリーソフトは皆無でありシェアソフトが多いです。
また、フォントの作り方もイラストエディタのような作り方(パスで描く)なので今回は割愛させて頂きます。
フォントを追加した場合は指定の文字にあわせてcontentに文字を入れて下さい。


番外編
TTFファイルは最近のブラウザで対応しておりますが
IEとiOS4以前には対応しておりません。
その為、用意したアイコンが表示されない現象がおきますので以下のように直して下さい。
1.TTFファイルをコピーして、拡張子を「eot」に変更
2.icons.cssに以下を追加
　src:url('icons.eot');

これでIEとiOS4以前のブラウザでもアイコンが表示されます。


今回は以上となります。