Octicons

GitHubが提供しているアイコンフォント「Octiocons」は、GitHub関連のアイコンやロゴだけではなく矢印や引用に使えそうなアイコンなど、わりと種類が豊富です。

今回はそんなOcticonsの使い方をご紹介します。

Octiconsの使い方

では、順番に見ていきましょう。

Octiconsをダウンロードする

まずは、GitHubからOcticonsをダウンロードします。

Octicons

Octiconsのダウンロード

ZIP形式でダウンロードされるので、ダウンロードが終わったら解凍しましょう。

Octiconsを使う準備

解凍が終わったら、HTMLのhead内の以下の記述をします。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="octicons/octicons.css">
</head>

ちなみに、この例の場合階層は以下のようになっています。

Octiconsの階層の確認

「octicons」は先ほど解凍したフォルダです。

これで、アイコンフォントが使えるようになりました。

Octiconsを実際に使う

では、実際にOcticonsを使ってみましょう。

Octiconsの一覧ページから、使いたいフォントを選んでクリックします。

Octiconsの選択

すると、次のような画面になるので、そこの右下にあるコードをコピーして利用するとアイコンが表示されます。

Octiconsのコードをコピーする

上のコードはフォントサイズが16px、下は32pxです。

実際に利用すると以下のようになります。

Octiconsの使用例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="octicons/octicons.css">
</head>
<body>
	<!-- for 16px icons -->
	<span class="octicon octicon-mark-github"></span>
	<!-- for 32px icons -->
	<span class="mega-octicon octicon-mark-github"></span>
</body>
</html>

Octiconsに自分で指定したスタイルを当てる

アイコンフォントなので、ここから新しくスタイルを当てることもできます。ちなみに、フォントの大きさは16pxの倍数だといい感じになるっぽいです。

Octiconsのベストプラクティス

Octicons - Usage

Octiconsにスタイルをあてて使う例

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="octicons/octicons.css">
	<style>
	.red {
		color: red;
	}
	.blue {
		color: blue;
	}
	</style>
</head>
<body>
	<!-- for 16px icons -->
	<span class="octicon octicon-mark-github"></span>
	<!-- for 32px icons -->
	<span class="mega-octicon octicon-mark-github red"></span>
	<!-- for 48px icons -->
	<span class="giga-octicon octicon-mark-github blue"></span>
</body>
</html>
･･･
.octicon, .mega-octicon, .giga-octicon {
  font: normal normal normal 16px/1 octicons;
  display: inline-block;
  text-decoration: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.mega-octicon { font-size: 32px; }

.giga-octicon { font-size: 48px; }
･･･

この例では、フォントの大きさが48px、色を赤と青のスタイルを新しく追加しました。

みなさんも適宜スタイルを当てて使用してみてください。

以上、Octiconsの使い方でした。