it-swarm.com.de

Wie ersetze ich die Schaltfläche zum Senden der Suche durch einen Font Awesome-Charakter?

Ich möchte den Such-Submit-Button durch ein Font Awesome Zeichen wie das Magnifier (Search Icon) Zeichen ersetzen und Search the site im Suchfeld.

Wie kann ich so etwas erreichen?

(enter image description here

6
Mojtaba Reyhani

Um die neue Formularschaltfläche hinzuzufügen, habe ich hook_form_FORM_ID_alter in meiner template.theme-Datei in meinem Themenordner verwendet (Hinweis: Ersetzen Sie ThemeName durch den Namen Ihres Themas im folgenden Code):

ThemeName.theme:

**
 * Replace the Search Submit Button with a Font Awesome Character.
 */
function ThemeName_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('');
  $form['actions']['submit']['#attributes']['class'][] = 'search-button';
}

Denken Sie daran, verwenden Sie html_entity_decode(), um den Unicode-Code zu analysieren.
und CSS:

.search-button input[type="submit"]{
    font-family: FontAwesome;
    color: #fff !important;
    display: inline;
    font-size: 18px;
}
9
Mojtaba Reyhani
  1. Um die Beschriftung in einen Platzhaltertext zu konvertieren, müssen Sie hook_form_alter In Ihrem benutzerdefinierten Design in Drupal verwenden. Die Formular-ID für das Suchfeld lautet seach_block_form. Sie können dazu den folgenden Code verwenden:

    /**
     * Implements hook_form_alter().
     */
    function hook_form_search_block_form_alter(&$form, &$form_state) {
      $form['keys']['#attributes']['placeholder'][] = t('Search');
    }
    
  2. Um das Erscheinungsbild der Suchschaltfläche zu ändern, können Sie einfach CSS verwenden. Normalerweise setze ich den Hintergrund auf ein Symbol und verwende einen Texteinzug, um den Text auszublenden.

6
googletorp

Ich habe in einer Vorverarbeitungsfunktion Folgendes getan, um font-fantastische Symbole hinzuzufügen. Die Sucheingabe ist etwas schwierig, da das einzige, was die Suchschaltfläche identifiziert, die Beschriftung ist. Dann verstecke das Element mit dem Selektor .button--text in CSS.

function MYTHEME_preprocess_input(&$variables) {
  $element = &$variables['element'];
  // Ugh :(
  if ($element['#type'] === 'submit' && $element['#value']->__toString() === 'Search') {
    $variables['children'] = $element['#children'];
    $variables['children'][] = [
      '#theme' => 'html_tag',
      '#tag' => 'i',
      '#attributes' => ['class' => ['fa', 'fa-search']],
    ];
  }
}
4
mradcliffe

Anweisungen für Drupal 8/FontAwesome 5

Erstellen Sie eine Datei YOUR_THEME_NAME_HERE.THEME und legen Sie sie in Ihrem Themenverzeichnis ab (z. B. Ihr_Site_Name/Themen/Ihr_Themename).

Fügen Sie dies in die Datei ein. Es ist PHP Code, um den Suchblock zu finden und den Wert für das FontAwesome-Symbol in UNICODE zu ändern. Weitere Zeichen finden Sie unter diesem Link https: //fontawesome.com/cheatsheet .

<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('&#xf002;');
}
?>

Öffnen Sie die CSS-Datei Ihres Themas (z. B. Ihr_Site_Name/Themes/Ihr_Themename/CSS/Styles.css) und fügen Sie diese ein, wodurch der gesamte eingegebene Übermittlungstext an FontAwesome geändert wird. Ich bin mir nicht sicher, ob dies funktioniert, wenn Sie auch Text in die Eingabeschaltfläche einfügen möchten, obwohl dies nur für ein Symbol in Ordnung ist.

Stellen Sie sicher, dass Sie FontAwesome importieren, und fügen Sie dies oben in der CSS-Datei hinzu

@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

fügen Sie dies dann im CSS hinzu

input#edit-submit {
    font-family: 'Font Awesome\ 5 Free';
    background-color: transparent;
    border: 0;  
}

SPÜLEN SIE ALLE CACHES UND ES SOLLTE FEIN ARBEITEN

Google Font Effects hinzufügen

Wenn Sie auch Google Web Fonts verwenden, können Sie dem Symbol auch Effekte hinzufügen (weitere Informationen finden Sie hier https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta ). Sie müssen eine Google Web-Schriftart importieren, einschließlich der Effekte, die Sie zuerst im CSS verwenden möchten

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800&effect=3d-float');
@import url('https://use.fontawesome.com/releases/v5.0.9/css/all.css');

Kehren Sie dann zu Ihrer .THEME-Datei zurück und fügen Sie die Klasse für den 3D-Float-Effekt hinzu, sodass der Code der Eingabe nun eine Klasse hinzufügt. Es stehen verschiedene Effekte zur Verfügung. Wählen Sie einfach den gewünschten Effekt aus, ändern Sie das CSS für den Schriftimport und ändern Sie den Wert FONT-EFFECT-3D-FLOAT im folgenden Code in font-effect-WHATEVER_EFFECT_HERE. Keine Effekte befinden sich noch in der Beta-Phase und funktionieren nicht in allen Browsern. Lesen Sie hier, bevor Sie es versuchen https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta

<?php
function YOUR_THEME_NAME_HERE_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
  $form['actions']['submit']['#value'] = html_entity_decode('&#xf002;');
  $form['actions']['submit']['#attributes']['class'][] = 'font-effect-3d-float';
}
?>

Für Drupal 8/FontAwesome 5 (andere ähnliche Lösungen oben haben nicht funktioniert)

Wenn Sie das Modul fontawesome bereits installiert haben, können Sie es zu Ihrer THEMENAME.theme - Datei hinzufügen

use Drupal\Component\Render\FormattableMarkup;

function THEMENAME_form_search_block_form_alter(&$form, &$form_state) {
    $form['keys']['#attributes']['placeholder'][] = t('Search');
    $value = new FormattableMarkup('<i class="fas fa-search"></i>@text', ['@text' => '',]);
    $form['actions']['submit']['#value'] = $value;
}
1
GiorgosK

Änderungen müssen in der Datei yourtheme.theme in Ihrem yourtheme-Verzeichnis vorgenommen werden. Im Folgenden wird der Text der Schaltfläche "Senden" geändert.

function yourtheme_form_search_block_form_alter(&$form, &$form_state) {
  $form['actions']['submit']['#value'] = t('Zoeken');
}
0
firfin

Wenn Sie das Boostrap-Unterthema und drupal) verwenden, können Sie Glyphicon im Einstellungsthema für alle Schaltflächen entfernen, ABER Sie können Glyphicon für bestimmte Schaltflächen mit diesem Hook in Ihrem TEMPLATE.theme https: // drupal-bootstrap.org/api/bootstrap/bootstrap.api.php/function/hook_bootstrap_iconize_text_alter/7

function YOURTEMPLATENAME_bootstrap_iconize_text_alter(array &$texts) {
  // use ksm($form) OR other dump($form) functions
  if($texts['contains']['YOURTEXT']) {
    unset($texts['contains']['YOURTEXT']);
  }
}

wenn Sie den Titel der Schaltfläche anzeigen möchten, müssen Sie die Datei bootstrap/src/Plugin/Form/SearchForm.php in Ihr SUBTHEME kopieren

YOURSUBTHEME/src/Plugin/Form/SearchForm.php Kopieren Sie den Inhalt der Datei, fügen Sie ihn in Ihre Datei ein und bearbeiten Sie den Inhalt wie folgt:

<?php
...
use Drupal\bootstrap\Plugin\Form\FormBase;
...

  public function alterFormElement(Element $form, FormStateInterface $form_state, $form_id = NULL) {
    $form->advanced->setProperty('collapsible', TRUE);
    $form->advanced->setProperty('collapsed', TRUE);
    $form->basic->removeClass('container-inline');
    $form->basic->submit->setProperty('icon_only', FALSE);
    $form->basic->keys->setProperty('input_group_button', TRUE);
  }
}

damit sehen Sie nur den Text "Suche" und kein Glyphikon auf Ihrer Suchschaltfläche

vergessen Sie nicht, den Cache zu leeren!

0
moeb