jQuery UIに付属しているアイコンを単独で利用する

jQuery UIでは、アイコン付きのボタンやメニューを作成することができます。jQuery UIをインクルードしていれば、付属しているアイコンはHTML要素にクラス指定することで、単独でも使用できます。

アイコン付きボタンなどの作成方法は他の記事にゆずることとして、ここではアイコンだけを取り出して利用する方法を解説します。

【コンテンツ】

  1. 利用できるアイコンの一覧
  2. jQuery UIをダウンロードする
  3. jsファイルとcssファイルをインクルードする
  4. アイコンを表示するためのコード
  5. アイコンの色を指定して表示する

【記事執筆時の環境】
jQuery UI 1.11.1
jQuery本体 1.10.2

利用できるアイコンの一覧

jQuery UIに付属し利用できるアイコンは以下になります。
アイコンのサイズは16x16ピクセルで、1枚の画像にまとめられているためCSSスプライトで利用します。

jQuery UIのアイコン一覧

アイコンはバージョンアップによって時々追加されるみたいですから、最新は下記ページで確認してください。
http://api.jqueryui.com/theming/icons/

なお、アイコン色は全部で以下の5種類の色が使えます。
ブラック(#222222)
ブルー(#228ef1)
オレンジ(#ef8c08)
イエロー(#ffd27a)
ホワイト(#ffffff)

jQuery UIをダウンロードする

この記事では、既にjQuery UIを利用していることを想定していますが、ダウンロードする際は下記ページから行います。
http://jqueryui.com/download/

jQuery UI ダウンロードページ

なお、jQuery UIは必要なコンポーネントだけをダウンロードすることもできます。
必要なコンポーネントだけをダウンロードするには、Componentsの"Toggle All"のチェックを外してから、必要なコンポーネントにチェックを入れます。

アイコン画像はどのようなコンポーネントをダウンロードしても含まれています。

jsファイルとcssファイルをインクルードする

HTML文書内で、jsファイルとcssファイルをインクルードします。
アイコン画像が入っているディレクトリ"images"は、cssディレクトリの下におきます。
下記はその記述例です。

アイコンを表示するためのコード

アイコンを表示するには、HTML要素に、"ui-icon"とアイコン種類の2つのクラスを指定します。
以下はその記述例です。

アイコン種類のクラスは、下記ページで確認してください。
http://api.jqueryui.com/theming/icons/

下記はアイコンを横に並べて表示した例です。

アイコンを横に並べて表示した図

このHTMLコードは以下になります。

CSSは以下のようにしています。

アイコンの後にテキストを挿入することもできます。

アイコンの後にテキストを挿入した図

この場合のHTMLコードは以下になります。

アイコンの色を指定して表示する

アイコン色は5種類用意されていますが、デフォルトではブラックが選択されます。

jQuery UIのCSSファイルをみると、色を指定するには親要素に状態を示すクラスを指定する必要があります。
以下はその記述部分です。

このCSSに設定しているクラスをそのまま利用しても構いませんが、親要素に関係なく色が指定できるように、私は以下の設定をユーザーCSSファイルに記述しました。
background-imageを上書きしますので、ユーザーCSSファイルはjQuery UIのCSSファイルよりも後でインクルードするようにします。

この色指定用クラスを使って記述したHTMLコード例が以下になります。
色を指定しないときはブラックです。

ブラウザでの表示は下記です。

色指定したアイコンの図

スポンサーリンク

ページの先頭へ