Webフォント font-awesome のアイコン一覧

Web フォントを使うと、画像イメージを用意しなくても Webアイコンフォントが使えるので表現力が上がる。
html 内で指定する場合は、文中で以下の様に指定する。
[code lang=”html”]<i class=”fa fa-adjust”></i>[/code]
そうすると、次の様に表示される。 →

そのためには先ず head で Webフォントの CSS を読み込んでおく必要がある。
CDNはここ
[code lang=”html”]
<link rel=”stylesheet” href=”//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”>
[/code]

WordPress の場合

管理画面の [外観] → [テーマの編集] で style.css に以下の一文を追加すれば良い。
[code lang=”css”]
@import url(“//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css”);
[/code]
プラグインで導入する方法もある。こちらは、style.css を修正する必要なし。
Better Font Awesome プラグインとかがお勧め。これは使う font-awesome のバージョンが指定できる。ただし、挿入されるのはショートコードなので、MovableType 等に移行するとき問題になる。
WordPress Visual Icon Fonts プラグインも良さそうだが、これは font-awesome のバージョンが古い。

Better Font Awesome でショートコードを使わない Hack!

plugins\better-font-awesome\lib\better-font-awesome-library\js\admin.js の最後の方を以下の様に修正する。ショートコードではなく直接 i タグで挿入されるので、Wordpres 以外に移行する場合も問題なくなる。

FireFox でWebフォントが反映されない場合の対処

FireFoxの最新ブラウザはクロスドメイン制約のため、CSS内部で参照している eot などのファイルが読み込めず、Webフォントが表示できない場合がある。

• 対処1
  参照先サーバの .htaccess に以下の様に追記する。
  [code lang=”html”]
  <IfModule mod_headers.c>
  <FilesMatch “.(ttf|otf|eot|woff)$”>
  Header set Access-Control-Allow-Origin “アクセスを許可するサイト”
  </FilesMatch>
  </IfModule>
  [/code]
• 対処2
  Webフォントのフルセットを自分の環境に置いて使用する。

Font-Awesome
アイコン一覧はここから

Tweet