it-swarm.com.de

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

Ich habe also Font Awesome auf meiner Drupal 7-Site) arbeiten lassen. Ich verwende nicht das Font Awesome Drupal -Modul. Ich deklariere nur den Stil Blatt 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 <i class="icon-search"></i> Verwende, erhalte 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 ich die Schaltfläche "Senden" durch das Symbol "Font Awesome" ersetzen kann. Ich habe versucht, das obige Skript so anzupassen, dass es $form['actions']['submit']['#markup'] Verwendet, 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 verdammt noch mal gegoogelt, aber ich kann keine Lösung finden.

Irgendwelche Vorschläge?

7
Anne Bonham

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 verwenden standardmäßig <input type="submit" value="Submit"> Und um FontAwesome zu verwenden, müssen Sie CSS anwenden, was Sie nicht für <input> Tun können. Sie können jedoch Text hinzufügen und CSS mit <button> Anwenden. Ziel ist es also, <input type="submit" value="Submit"> Durch <button type="submit" value="Submit"><i class="icon-search"></i></button> Zu ersetzen.

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 es in $ form ['action] [' submit '] ein Standardarray für Senden-Schaltflächen gibt. 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. Dadurch wird jedoch das Suchformular in Drupal) unterbrochen, sodass 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 Drupal Core einige Verarbeitungen ausführt, für die <input>, Um zur Suchergebnisseite umzuleiten. Ich weiß nicht, wie ich das mit meinem <button> Funktionieren soll.

Mein Hack bestand also darin, CSS zu verwenden, um die Standardschaltfläche <input> Auf "display: none" zu setzen. Mein Formular enthält also effektiv zwei Übermittlungsschaltflächen, aber die Standardschaltfläche ist ausgeblendet und nur meine <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.

9
Steven

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

Definieren Sie in Ihrem CSS einfach die fontawesome-Schriftfamilie.

ZB Rufen Sie in Ihrem eigenen Modul hook_form_alter () auf

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

}}

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

19
louieliu

Ich habe dies mit meiner eigenen Themenfunktion erreicht, um eine zusätzliche Einstellung in einem hook_form_alter. Mein Beispiel ist das Ändern der Sucheingabe von einer Eingabe in eine Schaltfläche. Von dort kann ich Klassen für Pseudoelement-Symbole 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 Schaltflächenelement :after & :before Pseudoelemente. Das war genug für mich, um dort ein Symbol zu finden und nur den Standardtext "Suchen" mit CSS auszublenden.

3
jswitchback

Für Drupal 8:

a) Wenn Sie Bootstrap-Thema 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 das Thema Bootstrap) nicht 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 ....

2
ahoms

Dies ist fast die gleiche Lösung wie bei Steven, ersetzt jedoch die Übermittlung von <input> Durch <button>, Anstatt sie so hinzuzufügen, dass beide im HTML-Code vorhanden sind. Dies kommt mit der gleichen Maßgabe, dass IE6/7 <button> Nicht unterstützt, und dies umso mehr, als es die Möglichkeit ausschließt, dass beide, wie in Stevens Lösung, es IE6/7-Benutzern zumindest ermöglichen würden, die Eingabetaste zu drücken Die angezeigte Schaltfläche würde nicht funktionieren.

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 jetzt verfügbaren entsprechenden Vorlagenvorschlag, z. B. Vorlagen/Eingabe - Senden - Bearbeiten-Senden.html , den 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.

2
mlncn

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