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 사이트의 이미지를 잘라 사용하는 아날로그 일을하고 있었기 때문에 모든 아이콘을 쉽게 사용할 수 좋았다!