Octicons使ってみた

GitHubがOcticonsを公開したので、Chrome Storeで公開しているGitHub Checkerに早速使ってみた。

GitHub Checkerに関する以前の投稿はこちら

使用前

htmlとcssはこんな感じ

<h3 class="repo-title"><a href="https://github.com/dtaniwaki/github-checker">kaizenplatform / github-checker</a></h3>

.repo-title {
  display: block;
  margin-bottom: 10px;
  padding-left: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  background: url('/images/repo.png') no-repeat 0 0;
  font-size: 1.2em;
}

使用後

htmlとcssはこんな感じ

<h3 class="repo-title"><span class="octicon octicon-repo"></span><a href="https://github.com/dtaniwaki/github-checker">kaizenplatform / github-checker</a></h3>

.octicon {
  font-size: 16px;
}
.repo-title {
  display: block;
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #eee;
  font-size: 1.2em;
  .octicon {
    margin-right: 10px;
  }
}

octiconクラスとoction-xxxクラスを持ったspanを追加するだけ。
octiconは16pxの倍数にすると奇麗に見えるので推奨とのこと。

今までGitHubのサイト上の画像を切り出して使うというアナログなことをしていたので、全アイコンが簡単に使えて良かった！