フォーム送信ボタンでFont Awesomeを使用するにはどうすればよいですか？

そこで、Drupal 7サイトでFont Awesomeを使用しています。Font Awesome Drupalモジュールを使用していません。template.phpでスタイルシートを宣言しているだけです。

function genchstyle_preprocess_html(&$variables) {
  drupal_add_css(
    'http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css',
    array('type' => 'external')
  );
}

これで、を使用すると<i class="icon-search"></i>、小さな虫眼鏡のアイコンが表示されます。

私は最近、フォームの[ 送信 ]ボタンをこのような画像に置き換える方法を学びました。

function genchstyle_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_block_form') {
    $form['actions']['submit']['#type'] = 'image_button';
    $form['actions']['submit']['#src'] = drupal_get_path('theme', 'genchstyle') . 'images/search.png';
    $form['actions']['submit']['#attributes']['class'][] = 'icon-search';
  }
}

送信ボタンをFont Awesomeアイコンに置き換える方法がわかりません。上記のスクリプトを使用するように調整してみたところ$form['actions']['submit']['#markup']、ボタンをアイコンに置き換えることができましたが、アイコンは機能している送信トリガー（またはリンク）ではなくなりました。

私はすべてのFont Awesomeの例を確認し、これから大まかにググってみましたが、解決策を見つけることができません。

助言がありますか？

私は同じ問題を解決しようとしてきました、そして私は解決策を見つけたと思いますが、それは少しハックです。私は他の誰かがこれに基づいて構築し、それをより良くできることを望んでいます。

したがって、根本的な問題は、Drupalフォームがデフォルトで使用され<input type="submit" value="Submit">、FontAwesomeを使用するために、実行できないcssを適用する必要があることです<input>。ただし、を使用してテキストを追加し、CSSを適用できます<button>。だから、目標は交換することである<input type="submit" value="Submit">と<button type="submit" value="Submit"><i class="icon-search"></i></button>

新しいフォームボタンを追加するために、テーマフォルダー内のtemplate.phpファイルでhook_form_alterを使用しました（MYTHEMEをテーマの名前に置き換えます）。

function MYTHEME_form_alter(&$form, &$form_state, $form_id) {
  if ($form_id == 'search_block_form') {
    $form['actions']['button']['#prefix'] = '<button type="submit" value="Submit">';
    $form['actions']['button']['#suffix'] = '</button>';
    $form['actions']['button']['#markup'] = '<i class="icon-search"></i>';
  }
} 

これにより、フォームに正しいマークアップが追加されますが、残念ながら、2つの送信ボタンがあります。kpr（$ form）を使用すると、$ form ['actions] [' submit ']にデフォルトの送信ボタン配列があることがわかります。unset（$ form ['actions'] ['submit]）;を使用してそれを取り除こうとしました。また、$ form ['actions'] ['submit'] ['＃access'] = FALSE。どちらもデフォルトの送信ボタンを削除しますが、残念なことに、Drupalの検索フォームが壊れ、送信時にユーザーは検索結果を表示せずにホームページに送られます。フォームアクションはホームページをポイントし、/ search / node / [search term] <input>にリダイレクトされるため、Drupalコアは、フィールドが検索結果ページにリダイレクトすることを必要とする処理を実行していると思います。私はしません<button>

したがって、私のハックはcssを使用してデフォルトの<input>送信ボタンを「display：none」に設定することでした。そのため、フォームには事実上2つの送信ボタンがありますが、デフォルトのボタンは非表示で、<button>FontAwesomeのある要素のみが表示されます。これで検索機能は動作しますが、htmlに2つの送信ボタンを配置するのは見苦しいようです。誰かがこれを改善できれば、私は非常に感謝します。

通常、検索ボタンの値をFontawesome Unicodeコードに置き換えます。

あなたのCSSでfontawesome font-familyを定義してください。

EG独自のモジュールでhook_form_alter（）を呼び出します

if($form_id = 'search_block_form'){
  $form['actions']['submit']['#value'] = decode_entities('');

}

recodeは、decode_entities（）を使用してUnicodeコードを解析します。

CSS

.block-search input[type="submit"]{
  border: 0;
  font-size: 1.3em;
  vertical-align: top;
  margin-left: -45px;
  font-family: 'FontAwesome';
}

ボタンに検索アイコンが表示され、テキスト入力フィールド内に配置されます。

ref。Font-Awesomeチートシート

私は、独自のテーマ関数を使用してこれを実現し、の追加設定を説明していhook_form_alterます。私の例では、検索入力を入力からボタンに変更しています。そこから、疑似要素アイコンのクラスを追加できます。これは、適切なマシン名とフォームIDが入れ替えられたtemplate.phpに入れられます。

/**
 * Implements theme_button().
 */
function THEMENAME_button($variables) {
  $element = $variables['element'];
  $element ['#attributes']['type'] = 'submit';
  element_set_attributes($element, array('id', 'name', 'value'));

  // My custom setting coming from the hook_form_alter below...
  $element_type = isset($element['#element_type']) ? $element['#element_type'] : 'submit';

  $element ['#attributes']['class'][] = 'form-' . $element ['#button_type'];
  if (!empty($element ['#attributes']['disabled'])) {
    $element ['#attributes']['class'][] = 'form-button-disabled';
  }

  // And output a button or input element...
  if ($element_type === 'button') {
    return '<button' . drupal_attributes($element['#attributes']) . '>' . $element['#value'] . '</button>';
  } else {
    return '<input' . drupal_attributes($element['#attributes']) . ' />';
  }
}

/**
 * Implements hook_form_alter().
 */
function THEMENAME_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) {
    // Your FORM ID here...
    case 'search_block_form':
      $form['actions']['submit']['#element_type'] = 'button';
      $form['actions']['submit']['#attributes']['class'][] = 'glyphicon halflings-search';
      break;
    // Add more switch cases to affect other forms...
    case 'FORM_ID':
      break;
  }
}

もちろん、配列内に別の設定を追加して、ボタン内のマークアップを処理することもできます。私はボタン要素が:after＆:before疑似要素を許可するのでそうではありません。アイコンをそこに入れ、CSSでデフォルトの「検索」テキストを非表示にするだけで十分でした。

Drupal 8の場合：

a）Bootstrapテーマを使用している場合は、送信宣言でGLYPHICONS設定プロパティ#iconを使用できます。

$form['submit'] = array(
    '#type' => 'submit',
    '#value' => $this->t('Do something'),
    "#icon" => Bootstrap::glyphicon('chevron-left'),       
);

b）Bootstrapテーマを使用しない場合、またはGlyphicons以外のアイコン（たとえば、この例のようなFontawesome）が必要な場合は、次のように少しカスタマイズできます。

$form['submit'] = array(
    '#type' => 'submit',
    '#value' => $this->t('Login to Facebook to vote'),
    "#icon" => array(
        '#type' => "html_tag",
        '#tag' => "span",
        '#value' => "",
        '#attributes' =>  array(
            'class' => array("fa","fa-facebook")
        )
    )           
);

これはすべてFORM_ALTERにも当てはまると思います。

これはStevenのソリューションとほぼ同じですが、HTMLに両方が存在するような追加<input>で<button>はなく、送信を置き換えます。これには、IE6 / 7がをサポートしていないのと同じ条件が付いています<button>が、さらに表示されるボタンが表示されない場合でも、スティーブンのソリューションのように両方を持つと、少なくともIE6 / 7ユーザーがEnterキーを押すことができる可能性がなくなるためです。作業。

以下のこのアプローチには、HTMLマークアップをテンプレートファイルに保持するという利点があります。

ではyourtheme.theme：

/**
 * Implements hook_theme_suggestions_HOOK_alter for form input elements.
 */
function yourtheme_theme_suggestions_input_alter(array &$suggestions, array $variables) {
  $suggestions[] = $variables['theme_hook_original'] . '__' . str_replace('-', '_', $variables['element']['#id']);
}

templates / input--submit--edit-submit.htmlなど、現在利用可能な対応するテンプレートの提案で、コアinput.html.twigを次のようにオーバーライドします。

{#
/**
 * @file
 * Overridden theme implementation for an 'input' #type form element.
 *
 * Available variables:
 * - attributes: A list of HTML attributes for the input element.
 * - children: Optional additional rendered elements.
 *
 * @see template_preprocess_input()
 *
 * @ingroup themeable
 */
#}
<button{{ attributes }}>
  <i class="icon-search"></i>
  <span class="visually-hidden">Search</span>
</button>
{{ children }}

もちろん、このようなテンプレートファイルは、クラスの変更やマークアップの変更や追加が非常に簡単です。

画像はcssクラスを介して追加されるため、[＃type] => 'image_button'を使用しないでください。代わりにこれを試してください：

function genchstyle_form_alter(&$form, &$form_state, $form_id) {
if ($form_id == 'search_block_form') {
$form['actions']['submit']['#type'] = 'button';
$form['actions']['submit']['#attributes']['class'][] = 'icon-search';
}