web-dev-qa-db-ja.com

検索送信ボタンをFont Awesomeの文字に置き換える方法は？

検索送信ボタンをFont Awesome文字（Magnifier（検索アイコン）文字など）に置き換えて、検索ボックス内でサイトを検索します。

どうすればこのようなことを達成できますか？

enter image description here

8searchforms
6
Mojtaba Reyhani

新しいフォームボタンを追加するために、テーマフォルダーのtemplate.themeファイルで hook_form_FORM_ID_alter を使用しました（通知：ThemeNameを次のコードのテーマの名前に置き換えます）。

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

注意：Unicodeコードを解析するには、html_entity_decode()を使用します。
およびCSS：

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

  1. ラベルをプレースホルダーテキストに変換するには、Drupalのカスタムテーマでhook_form_alterを使用する必要があります。検索ボックスのフォームIDはseach_block_formであるため、次のコードを使用してこれを実行できます。

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

  2. 検索ボタンのルックアンドフィールを変更するには、CSSを使用するだけです。通常は、背景をアイコンに設定し、text-indentを使用してテキストを非表示にします。

6
googletorp

Font-awesomeアイコンを追加する前処理関数で次のことを行いました。検索ボタンを識別するのはラベルだけなので、検索入力では少し難しいです。次に、要素をCSSのセレクタ.button--textで非表示にします。

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

Drupal 8/FontAwesome 5の手順

YOUR_THEME_NAME_HERE.THEMEファイルを作成し、テーマディレクトリに配置します（例：your_site_name/themes/your_theme_name）

これをファイルに貼り付けます。PHP検索ブロックを検索し、値をFontAwesomeアイコンのUNICODEに変更するコードです。他の文字はこのリンクで検索できます 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;');
}
?>

テーマのCSSファイル（つまり、your_site_name/themes/your_theme_name/css/styles.css）を開いて貼り付け、すべての入力送信テキストをFontAwesomeに変更します。入力ボタンにもテキストを追加したい場合、これが機能するかどうかはわかりませんが、アイコンだけの場合は問題ありません。

FontAwesomeをインポートしていることを確認し、CSSファイルの先頭に追加します

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

次に、これをCSSに追加します

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

すべてのキャッシュをフラッシュし、細かく作業する必要があります

Googleフォント効果を追加

Google Web Fontsも使用している場合は、アイコンに効果を追加することもできます（詳細はこちら https://developers.google.com/fonts/docs/getting_started#enabling_font_effects_beta ）。 CSSで最初に使用したい効果を含むGoogle Web Fontをインポートする必要があるので、

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

次に、.THEMEファイルに戻り、3Dフロート効果のクラスを追加して、コードが入力にクラスを追加するようにします。利用可能なさまざまな効果があります。したがって、好みの効果を選択し、フォントインポートのCSSを変更し、以下のコードの値FONT-EFFECT-3D-FLOATをfont-effect-WHATEVER_EFFECT_HEREに変更します。効果はまだベータ版ではなく、すべてのブラウザーで機能しないため、試す前にこちらをお読みください 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

Drupal 8/FontAwesome 5の場合（上記の他の同様のソリューションは機能しませんでした）

fontawesome モジュールがすでにインストールされている場合は、THEMENAME.themeファイルに追加できます

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

Yourthemeディレクトリのyourtheme.themeファイルを変更する必要があります。以下は、送信ボタンのテキストを変更します。

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

Boostrapサブテーマとdrupal=を使用すると、すべてのボタンの設定テーマでグリフィコンを削除できますが、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']);
  }
}

ボタンのタイトルを表示したい場合は、bootstrap/src/Plugin/Form/SearchForm.phpファイルをサブテーマにコピーする必要があります

YOURSUBTHEME/src/Plugin/Form/SearchForm.phpファイルのコンテンツをコピーしてファイルに貼り付け、コンテンツを次のように編集します。

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

これを使用すると、「検索」というテキストのみが表示され、検索ボタンにはグリフィコンが表示されません。

キャッシュをフラッシュすることを忘れないでください！

0
moeb