Typiconsを使ってみる | ohmix.net / Room y.ohm

公開日: 2019年08月29日　更新日: 2019年09月14日

Typiconsとは何か？

Typiconsは336種類のベクターアイコンが収められたフリーに使えるアイコンフォントです。

まずはダウンロード

まずは、Typicons のサイトを開きます。

私はGITHUBからソースをダウンロードしました。

ダウンロードできたら今度はアップロードです。ZIPアーカイブを展開してから、サーバの適切な場所に置きます。私はtypeiconsというディレクトリを作り、そこへsrc以下を丸ごと転送しました。丸ごとまでは必要ないだろうと思いますが、足りなくて悩むのが嫌なもので。

<link rel="stylesheet" href="/typicons/font/typicons.min.css">

このコードを</head>の直前あたりに書くのが良いでしょう。WordPressの場合だと、[ダッシュボード]-[外観]-[テーマエディター]-[テーマヘッダー(header.php)]で編集できます。ここまでで準備完了です。

使ってみる

アイコン一覧はTypiconsサイトを下にスクロールしていくとあります。

さて、どうやってアイコンを表示するのかですが、

<i class="typcn typcn-[名称]"></i>

という形です。flashの場合、

<i class="typcn typcn-flash"></i>

となります。

このコードを必要とする場所へ貼り付ければ、ひとまず目的は達成です。

色と大きさを変えてみる

<span style="font-size: 3em; color: Tomato;">
  <i class="typcn typcn-flash"></i>
</span>
 
<span style="font-size: 48px; color: Dodgerblue;">
  <i class="typcn typcn-flash"></i>
</span>
 
<span style="font-size: 3rem; color: Mediumslateblue;">
  <i class="typcn typcn-flash"></i>
</span>

モノはフォントなので、いろいろとできます。左のは3文字分の高さ(親基準)に指定。真ん中のは48×48ピクセルに指定。右のは3文字分の高さ(ルート基準)に指定。

相対的に大きさを変えてみる

<i class="typcn typcn-flash" style="font-size: 0.75em;"></i>
<i class="typcn typcn-flash" style="font-size: 0.875em;"></i>
<i class="typcn typcn-flash" style="font-size: 1.33em;"></i>
<i class="typcn typcn-flash" style="font-size: 2em;"></i>
<i class="typcn typcn-flash" style="font-size: 3em;"></i>
<i class="typcn typcn-flash" style="font-size: 5em;"></i>
<i class="typcn typcn-flash" style="font-size: 7em;"></i>
<i class="typcn typcn-flash" style="font-size: 10em;"></i>

<div style="font-size: 0.5rem;">
  <i class="typcn typcn-flash" style="font-size: 0.75em;"></i>
  <i class="typcn typcn-flash" style="font-size: 0.875em;"></i>
  <i class="typcn typcn-flash" style="font-size: 1.33em;"></i>
  <i class="typcn typcn-flash" style="font-size: 2em;"></i>
  <i class="typcn typcn-flash" style="font-size: 3em;"></i>
  <i class="typcn typcn-flash" style="font-size: 5em;"></i>
  <i class="typcn typcn-flash" style="font-size: 7em;"></i>
  <i class="typcn typcn-flash" style="font-size: 10em;"></i>
</div>

<div style="font-size: 24px;">
  <i class="typcn typcn-flash" style="font-size: 0.75em;"></i>
  <i class="typcn typcn-flash" style="font-size: 0.875em;"></i>
  <i class="typcn typcn-flash" style="font-size: 1.33em;"></i>
  <i class="typcn typcn-flash" style="font-size: 2em;"></i>
  <i class="typcn typcn-flash" style="font-size: 3em;"></i>
  <i class="typcn typcn-flash" style="font-size: 5em;"></i>
  <i class="typcn typcn-flash" style="font-size: 7em;"></i>
  <i class="typcn typcn-flash" style="font-size: 10em;"></i>
</div>

表示されているアイコンの見た目の下端は揃っています。ただ、アイコンの上下にかなりのスペースが空きますね。

まとめ

Typiconsには、出来合いのclassがなさそうです。まあ、自力で書けばよいのでしょうが。

[Top]

　