FontAwesome をサーバーにUPして使う #PHP

v 4.7.0

https://github.com/FortAwesome/Font-Awesome/releases/tag/v4.7.0

以下のみ必要

./font-awesome/4.7.0/css/font-awesome.min.css
./font-awesome/4.7.0/fonts/FontAwesome.otf
./font-awesome/4.7.0/fonts/fontawesome-webfont.eot
./font-awesome/4.7.0/fonts/fontawesome-webfont.svg
./font-awesome/4.7.0/fonts/fontawesome-webfont.ttf
./font-awesome/4.7.0/fonts/fontawesome-webfont.woff
./font-awesome/4.7.0/fonts/fontawesome-webfont.woff2

htmlで使う例

指定できるアイコン一覧

<head>
<link rel="stylesheet" type="text/css" href="./font-awesome/4.7.0/css/font-awesome.css">
</head>

<i class="fa fa-deskotp"></i>

phpで使う例

<?php
class FontAwesome {
        // 古すぎるブラウザでは有効にならないように
        private function is_allow() {
                if(!strpos($_SERVER["HTTP_USER_AGENT"], "Gecko")) {
                        return false;
                }
                return true;
        }
        function css() {
                if($this->is_allow()) {
                        return '<link rel="stylesheet" type="text/css" href="./css/font-awesome.css">';
                }
        }
        function i($icon_name) {
                if($this->is_allow()) {
                        return sprintf('<i class="fa fa-%s"></i>', $icon_name);
                }
        }
        function p($icon_name) {
                if($this->is_allow()) {
                        print $this->i($icon_name);
                }
        }
}

$icon = new FontAwesome();
print $icon->css();

print $icon->("desktop");
// もしくは
$icon->p("desktop");

トラブル

header('X-UA-Compatible: IE=EmulateIE8');

IE11をIE8互換モードで動かす場合、FontAwesomeは使えない

PHP Parse error: syntax error, unexpected T_STRING, expecting T_OLD_FUNCTION or T_FUNCTION or T_VAR or '}'

php4ではprivateを書くと上記エラーになる。

ttf -> png化して使う

自分でpng化ツールを使う場合 jasonhinkle/font-awesome-to-png
- fontawesome-webfont.ttfをダウンロード

pip install pillow
pip install Pillow-PIL

python font-awesome-to-png.py --color white ALL
python font-awesome-to-png.py --size 9 --color \#4a4a4a pencil

--size指定しなければ16が初期値。

git clone https://github.com/FortAwesome/Font-Awesome
git clone https://github.com/jasonhinkle/font-awesome-to-png

cd font-awesome-to-png
cp -a ../Font-Awesome/webfonts/*ttf .

for ttf in *.ttf
do
  python font-awesome-to-png.py --size 12 --color white ALL --font $ttf
done