Drupal 7 で検索フォームを Font Awesome 風に変える方法

2015/06/20Drupal 7

Drupal のデフォルトの検索フォームのボタンを Font Awesome のものにスタイル変更する方法について。

Drupal に Font Awesome を導入するには、「そのまま Font Awesome を自作のテーマに含めて使う方法」と「専用のコントリビュートモジュールを使う方法」の 2 つの方法があります。モジュールの扱いに慣れていれば後者の「モジュールを使う方法」がとてもかんたんなのでまずはそれで Font Awesome を利用できる環境にしましょう。

$ drush dl fontawesome
$ drush -y en fontawesome

Drupal コアの検索フォームに手を入れるには hook_form_search_form_alter() を使います。以下のように submit の部分をボタンに変更して CSS class を追加すれば OK です。

/**
 * @file
 * Drupal の検索フォームにスタイルをつける。
 */

/**
 * Implements hook_form_alter().
 */
function njrc_search_form_search_form_alter(&$form, &$form_state, $form_id) {
  // スタイルをつけるため input submit を button に変更
  if (!empty($form['basic']['submit'])) {
    $form['basic']['submit']['#type'] = 'item';
    $form['basic']['submit']['#prefix'] = '<button type="submit" name="op" class="form-submit fa fa-search">';
    $form['basic']['submit']['#suffix'] = '</button>';
  }
}

以上です。

参考