Drupalのメニューにアイコンの追加

Drupalのモジュール（IconAPI）よりブロック/メニュー/フィールド/フィルだーなどにアイコンの追加は簡単に行えます

• 背景：Drupal7.54、IconAPI7.x-1.0、Font Awesome7.x-2.6
  • Font Awesomeのアイコンが豊富にそろっているので、良く利用されます
• IconAPIがメニュー/ブロック/フィールド/フィルダーにタイトルと主にアイコンの追加ができます

問題点：アイコン（例：Font Awesome）が多くて探しづらい

• Font Awesomeなどをインストールするとすべてのアイコンが表示されます（Font Awesomeだけで700以上のアイコンがあります）
  
• これらのアイコンがごく少ない一部しか使用しないです

モジュール（Fontello）より必要のみのアイコンをインポートします

• Fontello（http://fontello.com/）がいろいろなアイコン（Font Awesomeも含め）から選択、纏めることができます
• 必要なアイコンをFontelloウェブサイトから纏めてダウンロードしてインポートすることができます
• Fontelloのみ使用すれば必要のみのアイコンしか表示されず、シンプルで簡単に選べます
• 具体的な操作方法はビデオを参考にしてください

問題点：以前Fontelloで作成したアイコングループに新規アイコン追加は難しい

• サイト：Fontelloで沢山のアイコンから必要のみのアイコンを選択して、使用することができるので、非常に便利なオンラインツールです
  • Fontelloの使用方法：「自作した画像イメージをSVGに変換してFontelloカスタムアイコン作成方法」をご参考ください
• 但し、一度作成したアイコングループに新規アイコンを追加するときに、再度Fontelloで以前選択したアイコンをもう一度選択したり、新しいアイコンを追加したりすることが必要です
  • 沢山のアイコンから以前と同じようなアイコンを探すのは大変です
  • 間違いやすいし、選択漏れがよくあります
  • カスタマイズしたアイコンの名前、コードを再度作成、選択する必要があり、以前のものと違う名前、コードを付けてしまうミスがよくあります
• 新規アイコンを作成したアイコングループに手動で追加しようと試みましたが、アイコングループの構造が分からなくて失敗しました

解決：Fontelloサイトでアイコンインポート機能で以前のアイコングループを丸ごとインポートします

• 良く調べてみたら、Fontelloサイトが作成済みのアイコンのインポート機能があります
• サイトの上に設定のようなアイコンがあります、そこをクリックするとインポート(Import)メニューがあります
  
• インポート可能なフォーマットは2種類あります
  • 以前Fontelloからダウンロードしたアイコングループを解凍したら、config.jsonファイルがあります、それを選択すればよいです
  • 以前Fontelloからダウンロードしたアイコングループのzipファイルを選択すればよい
• アイコンをインポートすれば、以前選択したアイコンがすべて再選択された状態になります
  • 新規アイコンを追加して、再度ダウンロードすればよいです

Drupalのモジュール（IconAPI）よりブロック/メニュー/フィールド/フィルだーなどにアイコンの追加は簡単に行えます

• 背景：Drupal7.54、IconAPI7.x-1.0、Font Awesome7.x-2.6
  • Font Awesomeのアイコンが豊富にそろっているので、良く利用されます
• IconAPIがメニュー/ブロック/フィールド/フィルダーにタイトルと主にアイコンの追加ができます

問題点：アイコン（例：Font Awesome）が多くて探しづらい

• Font Awesomeなどをインストールするとすべてのアイコンが表示されます（Font Awesomeだけで700以上のアイコンがあります）
  
• これらのアイコンがごく少ない一部しか使用しないです

モジュール（Fontello）より必要のみのアイコンをインポートします

• Fontello（http://fontello.com/）がいろいろなアイコン（Font Awesomeも含め）から選択、纏めることができます
• 必要なアイコンをFontelloウェブサイトから纏めてダウンロードしてインポートすることができます
• Fontelloのみ使用すれば必要のみのアイコンしか表示されず、シンプルで簡単に選べます
• 具体的な操作方法はビデオを参考にしてください

やりたいこと：Drupalのモジュール（Flag）のテキストリンクをアイコン/ボタンにつけたいです

• 環境：Drupal7.54、Flag7.x-3.9
• モジュール（Flag）のフラッグ操作（フラッグを立てるなど）のリンクはテキスト（アンカータグ）です。
• UIの見た目はあまりよくないなので、アイコン/ボタンなどをつけたいです

解決１：CSSを利用してフラグリンクのバックグランドでアイコン/ボタンをつけます

• Flagリンクの固有タグクラスを割り出し（例：flag-wraaper）
  
• CSSでフラグのリンク（アンカータグ）のバックグランドに画像をセット（以下は例）

  .flag-wrapper a {
    padding-left: 20px;
  }
  /*　フラグが立った時の画像　*/
  .flag-wrapper a.flag-action {
    background: url([イメージへのリンク]) no-repeat left center;
  }
  /*　フラグがおれた時の画像　*/
  .flag-bookmarks a.unflag-action {
    background: url([イメージへのリンク]) no-repeat left center;
  }

• もちろん、フラグのリンク（アンカータグ）の疑似要素（:before、:after）を利用して、画像の追加ができます
• テキストリンクを表示させず、画像ボタンを追加したい場合は以下の例となります

  /*　フラグが立った時にボタン　*/
  .flag-wrapper. a.flag-action {
    background-image: url('[ボタンイメージへのリンク]');
    display:block;
    text-indent:-9999em;
  }
  /*　フラグが折れた時にボタン　*/
  .flag-wrapper. a.unflag-action {
    background-image: url('[ボタンイメージへのリンク]');
    display:block;
    text-indent:-9999em;
  }

  • ここでのポイントは： text-indent:-9999em;　リンクのテキストを非表示させます

解決２：Flagリンクの管理画面でイメージアイコンを直接に追加します

• Flagの管理（ホーム » 管理 » サイト構築 » Flags）の各フラグ設定画面にある「Flag link text」と「Unflag link text」の入力フィールドでイメージタグとして直接に追加します
• フラッグにテキストリンクが不要な場合、テキストを入力しなくて良いです

解決３：プログラムレベルでFlagリンクにアイコンをつけます

• FlagモジュールのAPI（template_process_flag）を利用して、アイコンの追加はできます
• プログラムの変更は面倒なので、ここで省略します

やりたいこと：Drupalのモジュール（Flag）のテキストリンクをアイコン/ボタンにつけたいです

• 環境：Drupal7.54、Flag7.x-3.9
• モジュール（Flag）のフラッグ操作（フラッグを立てるなど）のリンクはテキスト（アンカータグ）です。
• UIの見た目はあまりよくないなので、アイコン/ボタンなどをつけたいです

解決１：CSSを利用してフラグリンクのバックグランドでアイコン/ボタンをつけます

• Flagリンクの固有タグクラスを割り出し（例：flag-wraaper）
  
• CSSでフラグのリンク（アンカータグ）のバックグランドに画像をセット（以下は例）

  .flag-wrapper a {
    padding-left: 20px;
  }
  /*　フラグが立った時の画像　*/
  .flag-wrapper a.flag-action {
    background: url([イメージへのリンク]) no-repeat left center;
  }
  /*　フラグがおれた時の画像　*/
  .flag-bookmarks a.unflag-action {
    background: url([イメージへのリンク]) no-repeat left center;
  }

• もちろん、フラグのリンク（アンカータグ）の疑似要素（:before、:after）を利用して、画像の追加ができます
• テキストリンクを表示させず、画像ボタンを追加したい場合は以下の例となります

  /*　フラグが立った時にボタン　*/
  .flag-wrapper. a.flag-action {
    background-image: url('[ボタンイメージへのリンク]');
    display:block;
    text-indent:-9999em;
  }
  /*　フラグが折れた時にボタン　*/
  .flag-wrapper. a.unflag-action {
    background-image: url('[ボタンイメージへのリンク]');
    display:block;
    text-indent:-9999em;
  }

  • ここでのポイントは： text-indent:-9999em;　リンクのテキストを非表示させます

解決２：Flagリンクの管理画面でイメージアイコンを直接に追加します

• Flagの管理（ホーム » 管理 » サイト構築 » Flags）の各フラグ設定画面にある「Flag link text」と「Unflag link text」の入力フィールドでイメージタグとして直接に追加します
• フラッグにテキストリンクが不要な場合、テキストを入力しなくて良いです

解決３：プログラムレベルでFlagリンクにアイコンをつけます

• FlagモジュールのAPI（template_process_flag）を利用して、アイコンの追加はできます
• プログラムの変更は面倒なので、ここで省略します