web-dev-qa-db-fra.com

Comment remplacer le bouton de soumission de recherche par un caractère Font Awesome?

Je voudrais remplacer le bouton de soumission de recherche par un caractère Police Awesome comme la loupe (icône de recherche) , et mettez Recherchez le site dans la zone de recherche.

Comment puis-je réaliser quelque chose comme ça?

enter image description here

8searchforms
6
Mojtaba Reyhani

Afin d'ajouter le nouveau bouton de formulaire, j'ai utilisé hook_form_FORM_ID_alter dans mon fichier template.theme dans mon dossier de thème (Remarque: remplacez ThemeName par le nom de votre thème dans le code ci-dessous):

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

N'oubliez pas d'utiliser html_entity_decode() pour analyser le code Unicode.
et CSS:

.search-button input[type="submit"]{
    font-family: FontAwesome;
    color: #fff !important;
    display: inline;
    font-size: 18px;
}
9
Mojtaba Reyhani

  1. Pour convertir l'étiquette en texte d'espace réservé, vous devez utiliser hook_form_alter dans votre thème personnalisé dans Drupal. L'identifiant du formulaire pour la zone de recherche est seach_block_form, vous pouvez donc utiliser le code suivant pour cela:

    /**
 * Implements hook_form_alter().
 */
function hook_form_search_block_form_alter(&$form, &$form_state) {
  $form['keys']['#attributes']['placeholder'][] = t('Search');
}

  2. Pour changer l'apparence du bouton de recherche, vous pouvez simplement utiliser CSS. Ce que je fais habituellement, c'est de définir l'arrière-plan sur l'icône et d'utiliser le retrait de texte pour masquer le texte.

6
googletorp

J'ai fait ce qui suit dans une fonction de prétraitement pour ajouter des icônes impressionnantes. C'est un peu difficile avec l'entrée de recherche car la seule chose qui identifie le bouton de recherche est l'étiquette. Masquez ensuite l'élément avec le sélecteur .button--text en 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

Instructions pour Drupal 8/FontAwesome 5

Créez un fichier YOUR_THEME_NAME_HERE.THEME et placez-le dans votre répertoire de thèmes (c'est-à-dire votre_nom_site/themes/votre_nom_thème)

Collez-le dans le fichier, c'est PHP pour trouver le bloc de recherche et changer la valeur en UNICODE pour l'icône FontAwesome. Vous pouvez trouver d'autres caractères sur ce lien 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;');
}
?>

Ouvrez le fichier CSS de votre thème (c'est-à-dire votre_nom_site/themes/votre_nom_thème/css/styles.css), puis collez-le dans ce qui changera tout le texte d'entrée soumis à FontAwesome. Je ne sais pas si cela fonctionnera si vous souhaitez également ajouter du texte dans le bouton de saisie, mais pour une simple icône, cela convient.

Assurez-vous d'importer FontAwesome, ajoutez-le en haut du fichier CSS

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

puis ajoutez ceci dans le CSS

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

RINCEZ TOUTES LES CACHES ET IL DEVRAIT FONCTIONNER FIN

Ajouter des effets de police Google

Si vous utilisez également Google Web Fonts, vous pouvez également ajouter des effets à l'icône (voir plus ici https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta ). Vous devez importer une police Web Google comprenant les effets que vous souhaitez utiliser en premier dans le CSS afin qu'elle soit

@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');

Revenez ensuite à votre fichier .THEME et ajoutez la classe pour l'effet 3D Float afin que le code ajoute maintenant une classe à l'entrée. Il existe différents effets disponibles. Il suffit donc de choisir l'effet que vous aimez, de changer le CSS pour l'importation de polices et de changer la valeur FONT-EFFECT-3D-FLOAT dans le code ci-dessous en font-effect-WHATEVER_EFFECT_HERE. Aucun effet n'est toujours en version bêta et ne fonctionne pas dans tous les navigateurs, alors lisez ici avant de l'essayer 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';
}
?>
1
Nicholas Simon Cronwright

Pour Drupal 8/FontAwesome 5 (les autres solutions similaires ci-dessus n'ont pas fonctionné)

Si le module fontawesome est déjà installé, vous pouvez l'ajouter à votre THEMENAME.theme fichier

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

Les modifications doivent être effectuées dans le fichier yourtheme.theme de votre répertoire yourtheme. Ce qui suit modifie le texte du bouton d'envoi.

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

Si vous utilisez le sous-thème boostrap et drupal vous pouvez supprimer le glyphicon dans le thème des paramètres pour tous les boutons MAIS vous pouvez supprimer le glyphicon pour le bouton spécifique avec ce crochet dans votre 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']);
  }
}

si vous voulez afficher le titre du bouton, vous devez copier le fichier bootstrap/src/Plugin/Form/SearchForm.php dans votre SUBTHEME

YOURSUBTHEME/src/Plugin/Form/SearchForm.php copiez et collez le contenu du fichier dans votre fichier et modifiez le contenu comme ceci:

<?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);
  }
}

avec cela, vous ne verrez que le texte "recherche" et aucun glyphicon sur votre bouton de recherche

n'oubliez pas de vider le cache!

0
moeb