GitHubのアイコンフォント「Octicons」の使い方

Octicons

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

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

スポンサーリンク

Octiconsの使い方

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

Octiconsをダウンロードする

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

Octicons

Octiconsのダウンロード

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

Octiconsを使う準備

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

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

Octiconsの階層の確認

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

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

Octiconsを実際に使う

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

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

Octiconsの選択

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

Octiconsのコードをコピーする

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

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

Octiconsの使用例

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

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

Octiconsのベストプラクティス

Octicons – Usage

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

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

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

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

スポンサーリンク

フォローする

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*