DrupalのFlagリンク作成関数（flag_create_link）のパフォーマンス問題及び対応策

やりたいこと：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）を利用して、アイコンの追加はできます
• プログラムの変更は面倒なので、ここで省略します

Fontelloで自作したイメージ画像をアイコンにすることができます

• 特定な画像をアイコンに変換する必要があります
• 例：「漢」字の画像をアイコンに変換したいです
  

イメージ画像（例：pngフォーマット）をSVGフォーマットに変換

• いろいろなツール（例：Adobe illustrator）で画像をSVGフォーマットへの変換ができます
• ここで、ツールをインストールせず、Onlineツール（例：http://pngtosvg.com/）で変換することにしました

変換されたSVGファイルをFontelloページのカスタムアイコンエリアにアップロード

• FontelloウェブサイトにSVGフォーマットの画像をアップロードします
• FontelloサイトのSVGフォーマットに合わないときがありますが、Fontelloに紹介されたSVG変換サイト（ https://jakearchibald.github.io/svgomg/ ）で再度SVG変換をすればよいです
• アップしたイメージがFontelloのカスタムアイコンで表示され、名前などを変更することができます

Fontelloからアイコンセットをダウンロード

• カスタムアイコンを含め、選択したアイコンをダウンロードします
• ダウンロードしたアイコンセットを展開してdemo.htmlファイルを開いて自作したアイコンの確認ができます

複数のアイコンセットを作成する場合に各アイコンのUnicodeを重複しないよう

• Fontelloで一度作成さいたアイコンセットに各アイコンのUnicodeが新しく採番されるようです
  
• 複数のアイコンセットして、同時に使用する場合、アイコンのUnicodeが重複する可能性があります。
  • Unicodeの重複されたアイコンが表示されないことになります
• アイコンのUnicodeを新しい採番する必要があります