Wie verwende ich Font Awesome auf einer Schaltfläche zum Senden von Formularen?

Ich habe Font Awesome auf meiner Drupal 7-Site. Ich verwende nicht das Font Awesome Drupal-Modul. Ich deklariere nur das Stylesheet in der 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')
  );
}

Wenn ich jetzt benutze <i class="icon-search"></i>, bekomme ich ein schönes kleines Lupensymbol.

Ich habe kürzlich gelernt, wie man die Schaltfläche " Senden" eines Formulars durch ein Bild wie dieses ersetzt.

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';
  }
}

Ich kann nicht herausfinden, wie die Schaltfläche "Senden" durch das Symbol "Font Awesome" ersetzt werden kann. Ich habe versucht, das obige Skript an die Verwendung anzupassen, $form['actions']['submit']['#markup']und ich kann es dazu bringen, die Schaltfläche durch das Symbol zu ersetzen, aber dann ist das Symbol kein funktionierender Übermittlungsauslöser (oder sogar ein Link) mehr.

Ich habe alle Beispiele für Font Awesome überprüft und alles gegoogelt, aber ich kann keine Lösung finden.

Irgendwelche Vorschläge?

Ich habe versucht, das gleiche Problem zu lösen, und ich denke, ich habe eine Lösung gefunden, aber es ist ein wenig hacky. Ich hoffe, dass jemand anderes darauf aufbauen und es verbessern kann.

Das grundlegende Problem ist also, dass Drupal-Formulare standardmäßig verwendet werden. <input type="submit" value="Submit">Um FontAwesome verwenden zu können, müssen Sie CSS anwenden, auf die Sie nicht zugreifen können <input>. Sie können jedoch Text hinzufügen und CSS mit anwenden <button>. Das Ziel ist also zu ersetzen <input type="submit" value="Submit">mit<button type="submit" value="Submit"><i class="icon-search"></i></button>

Um die neue Formularschaltfläche hinzuzufügen, habe ich hook_form_alter in meiner template.php-Datei in meinem Themenordner verwendet (ersetzen Sie MYTHEME durch den Namen Ihres Themas):

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>';
  }
} 

Dies fügt dem Formular das richtige Markup hinzu, aber leider haben wir jetzt zwei Senden-Schaltflächen. Wenn Sie kpr ($ form) verwenden, können Sie sehen, dass in $ form ['action] [' submit '] ein Standardarray für die Schaltfläche "Senden" vorhanden ist. Ich habe versucht, es mit unset loszuwerden ($ form ['action'] ['submit]); und auch $ form ['action'] ['submit'] ['# access'] = FALSE. In beiden Fällen wird die Standardschaltfläche "Senden" entfernt. Leider wird das Suchformular in Drupal dadurch unterbrochen, dass der Benutzer beim Senden an die Startseite gesendet wird, ohne dass Suchergebnisse angezeigt werden. Die Formularaktion zeigt auf die Startseite und wird dann zu / search / node / [Suchbegriff] umgeleitet. Ich vermute also, dass der Drupal-Kern eine Verarbeitung ausführt, bei der das <input>Feld zur Suchergebnisseite umgeleitet werden muss. Ich nicht<button>

Mein Hack bestand also darin, CSS zu verwenden, um die Standard- <input>Senden-Schaltfläche auf "Anzeige: Keine" zu setzen. Mein Formular enthält also effektiv zwei Senden-Schaltflächen, aber die Standard-Schaltfläche ist ausgeblendet und nur mein <button>Element mit FontAwesome ist sichtbar. Jetzt funktioniert die Suchfunktion, aber es scheint unelegant, zwei Senden-Schaltflächen im HTML zu haben. Wenn jemand dies verbessern kann, wäre ich sehr dankbar.

Normalerweise ersetze ich den Wert der Suchschaltfläche in Fontawesome Unicode-Code.

Definieren Sie in Ihrem CSS einfach die fontawesome-Schriftfamilie.

EG Rufen Sie in Ihrem eigenen Modul hook_form_alter () auf

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

}}

Denken Sie daran, decode_entities () zu verwenden, um den Unicode-Code zu analysieren.

CSS

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

Sie sollten das Suchsymbol auf der Schaltfläche erhalten und in Ihrem Texteingabefeld platzieren.

ref. Font-Awesome Cheatsheet

Ich habe dies mit meiner eigenen Themenfunktion erreicht, um eine zusätzliche Einstellung in a zu berücksichtigen hook_form_alter. Mein Beispiel ist das Ändern der Sucheingabe von einer Eingabe in eine Schaltfläche. Von dort kann ich Klassen für Pseudoelementsymbole hinzufügen. Dies würde in die template.php gehen, wobei die richtigen Computernamen und Formular-IDs ausgetauscht werden.

/**
 * 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;
  }
}

Natürlich können Sie dem Array eine weitere Einstellung hinzufügen, um das Markup innerhalb der Schaltfläche zu verarbeiten. Ich habe nicht, weil ein Button-Element :after& :beforePseudo-Elemente erlaubt . Das war genug für mich, um dort ein Symbol zu finden und nur den Standardtext "Suchen" mit CSS auszublenden.

Für Drupal 8:

a) Wenn Sie das Bootstrap- Design verwenden, können Sie die GLYPHICONS-Einstellungseigenschaft #icon in der Übermittlungsdeklaration verwenden:

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

b) Wenn Sie kein Bootstrap-Design verwenden oder andere Symbole als Glyphicons möchten (z. B. Fontawesome, wie in diesem Beispiel), können Sie es wie folgt anpassen:

$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")
        )
    )           
);

Ich gehe davon aus, dass dies alles auch für FORM_ALTER gilt ....

Dies ist fast die gleiche Lösung wie bei Steven, ersetzt jedoch die <input>Übermittlung durch <button>eine solche, anstatt sie hinzuzufügen, sodass beide im HTML-Code vorhanden sind. Dies kommt mit der gleichen Maßgabe, die IE6 / 7 nicht unterstützt <button>, und dies umso mehr, als dadurch die Möglichkeit beseitigt wird, dass bei beiden wie in Stevens Lösung zumindest IE6 / 7-Benutzer die Eingabetaste drücken können, obwohl die angezeigte Schaltfläche dies nicht tun würde Arbeit.

Dieser Ansatz hat den Vorteil, dass das HTML-Markup in Vorlagendateien beibehalten wird.

In 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']);
}

Überschreiben Sie in dem entsprechenden Vorlagenvorschlag, der jetzt verfügbar ist, z. B. Vorlagen / Eingabe - Senden - Bearbeiten-Senden.html , die Kern- Eingabe.html.twig mit:

{#
/**
 * @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 }}

Eine solche Vorlagendatei kann natürlich sehr einfach geändert oder zusätzliche Klassen oder Markups hinzugefügt werden.

Da das Bild über die CSS-Klasse hinzugefügt wird, sollten Sie nicht [#type] => 'image_button' verwenden. Versuchen Sie stattdessen Folgendes:

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';
}