open-iconicについて

便利なアイコンフォントとして「Iconic」がありますが、最近このページが開かなくなりました。
結構便利なサイトだったのですが、ネット検索する内、利用する為の色々な代替案が見つかったのでご紹介します。

上記、見つかりました。(サイト移転されてたようです。)
Open Iconic, a free and open icon set

また、Googleが作者(Author)の次のようなアイコンも見つかりました。
Icon Sets • Iconify

ダウンロード形式で設置する方法

色々探してるうちGithubに同じものが置いてある事が解りました。
iconic/open-iconic

open-iconicのダウンロード
  1. 上述のサイトを開き、左の手順に沿って、zipファイルをダウンロードします。
解凍後のフォルダ、ファイル一覧
  1. ダウンロードしたファイルを解凍すると左のようなフォルダ、ファイルが作成されます。
  2. png」フォルダを開きますと、使用できるファイルの一覧が表示されます。

png画像を使用する方法

pngフォルダの表示

png」フォルダ内にある画像は、通常の画像と同じ方法でHTMLに埋め込むことができます。

例えば、左の「account-logout-2x.png」を使用したい時は、次のように記述します。

ファイルパスは、ご自分のサイトに合わせて変更してください。



【htmlのソースコード】

【表示サンプル】

ログアウト画像

背景画像(アイコン)として使用する方法

こちらの手順は、以前解説した「アイコンの作り方(画像タイプ)」と同じ手法です。
前述のpng画像を背景画像に使うだけです。

fontファイルを利用する

open-iconicを解凍した直後のfont」フォルダをご自分のフォルダ内に、丸ごとコピーをします。←ここ重要です。

そのフォルダ内の使用したい「css」ファイルをHTMLに組み込みます。
※ファイルパスは、ご自分のサイトに合わせて変更してください。

 

アイコンを表示させたい時の記述方法は、次のように記述します。

 

具体例も記述しておきます。
前述の「account-logout-2x.png」と同じアイコンを表示させたい時は、次のように記述します。

【htmlのソースコード】

【表示サンプル】

open-iconic.css を使用
open-iconic-bootstrap.css を使用
open-iconic-foundation.css を使用

CDN形式を使う場合

open-iconic のCDN形式

open-iconicのCDNはこちらにあるようです。
open-iconic – Libraries – cdnjs

使い方としては、まずCDNをHTMLに組み込む必要があります。

 

次に表示したいアイコンをHTMLに記述する必要があります。
※こちらについては前述の「ダウンロード形式」と同じです。

【htmlのソースコード】

【表示サンプル】

open-iconic.css を使用
open-iconic-bootstrap.css を使用
open-iconic-foundation.css を使用

CDN形式の画像を使う場合

CDNを提供している上記のサイトを表示します。
open-iconic – Libraries – cdnjs

open-iconic のCDN形式

左のページの「all files」をクリックし、一覧表の中から使用したいものを見つける

【htmlのソースコード】

【表示サンプル】

ログアウト画像
html5

前の記事

Font Awesomeの使い方