このブログではSymbolsetのSocial Regularというアイコンを使っていました。このアイコンはオープンソースではないので、このブログのGitHubリポジトリには含めることが出来ませんでした。なにか歯抜けのような気分だったので、他のアイコンに乗り換えようとおもいつつも月日が過ぎて行きました。

Font Awesome

Font Awesomeというとlessで作られているBootstrapで使うものという印象が強かったのですが、最近のバージョンではlessだけではなくscss版も提供されているので、こいつを使おうと思いました。

font-awesome-sassがあるじゃないか。

Get Startedのページに書かれていますが、font-awesome-sassというgemがあります。これを使えばいいじゃないかと思うのですが、残念ながらrailsで利用されることを前提にしている模様。non railsな環境では使いにくいです。

自分の環境に組み込む

結局zipファイルをダウンロードして、このブログのscssに組み込みました。ディレクトリレイアウトは以下の通りでThe Sass WayのHow to structure a Sass projectを参考にしています。最近のマイブームなディレクトリレイアウトです。

jekyllでsrc/_assets/scss/style.scssが_site/css/style.cssへ出力され、src/fontsは_site/fontsへ出力されるようにしています。_siteはウェブルートになるディレクトリです。

src
├── _assets
│   └── scss
│       ├── modules
│       ├── partials
│       ├── style.scss
│       └── vendor
│           ├── _font-awesome.scss
│           └── font-awesome
│               ├── _bordered-pulled.scss
│               ├── _core.scss
│               ├── _fixed-width.scss
│               ├── _icons.scss
│               ├── _larger.scss
│               ├── _list.scss
│               ├── _mixins.scss
│               ├── _path.scss
│               ├── _rotated-flipped.scss
│               ├── _spinning.scss
│               ├── _stacked.scss
│               └── _variables.scss
└── fonts
    ├── FontAwesome.otf
    ├── fontawesome-webfont.eot
    ├── fontawesome-webfont.svg
    ├── fontawesome-webfont.ttf
    └── fontawesome-webfont.woff

_font-awesome.scssの中身をディレクトリレイアウトに合わせて書き換えています。

@import "vendor/font-awesome/variables";
@import "vendor/font-awesome/mixins";
@import "vendor/font-awesome/path";
@import "vendor/font-awesome/core";
@import "vendor/font-awesome/larger";
@import "vendor/font-awesome/fixed-width";
@import "vendor/font-awesome/list";
@import "vendor/font-awesome/bordered-pulled";
@import "vendor/font-awesome/spinning";
@import "vendor/font-awesome/rotated-flipped";
@import "vendor/font-awesome/stacked";
@import "vendor/font-awesome/icons";

style.scssで_font-awesome.scssを読み込んでいます。

@charset "utf-8";

@import "partials/base";

@import "partials/elements";
@import "partials/page";
@import "partials/article";
@import "partials/category";
@import "partials/pagination";
@import "partials/responsive";

@import "vendor/syntaxhighlight";
@import "vendor/font-awesome";

これでアイコンが使えます(markdown文章に生なhtmlを書くのは抵抗ありますが…)