Làm cách nào để sử dụng Font Awesome trên nút gửi biểu mẫu?

Vì vậy, tôi đã có Font Awesome làm việc trên trang web Drupal 7 của mình. Tôi không sử dụng mô-đun Font Awesome Drupal. Tôi chỉ đang khai báo biểu định kiểu trong 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')
  );
}

Bây giờ, nếu tôi sử dụng <i class="icon-search"></i>, tôi nhận được một biểu tượng kính lúp nhỏ xinh.

Gần đây tôi đã học được cách thay thế nút Gửi của biểu mẫu bằng một hình ảnh như thế này.

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

Tôi không thể tìm ra cách thay thế nút gửi bằng biểu tượng Font Awesome. Tôi đã thử điều chỉnh kịch bản trên để sử dụng $form['actions']['submit']['#markup']và tôi có thể lấy nó để thay thế nút bằng biểu tượng, nhưng sau đó biểu tượng không còn là trình kích hoạt chức năng (hoặc thậm chí là một liên kết).

Tôi đã xem xét tất cả các ví dụ về Phông chữ Tuyệt vời và tìm ra cách giải quyết vấn đề này nhưng tôi không thể tìm ra giải pháp.

Bất kỳ đề xuất?

Tôi đã cố gắng giải quyết vấn đề tương tự, và tôi nghĩ rằng tôi đã tìm ra giải pháp, nhưng nó hơi rắc rối. Tôi hy vọng rằng ai đó khác có thể xây dựng dựa trên điều này và làm cho nó tốt hơn.

Vì vậy, vấn đề cơ bản là các hình thức Drupal theo mặc định sử dụng <input type="submit" value="Submit">và để sử dụng FontAwgie, bạn cần áp dụng css mà bạn không thể làm <input>. Tuy nhiên, bạn có thể thêm văn bản và áp dụng css bằng cách sử dụng <button>. Vì vậy, mục tiêu là để thay thế <input type="submit" value="Submit">bằng<button type="submit" value="Submit"><i class="icon-search"></i></button>

Để thêm nút biểu mẫu mới, tôi đã sử dụng hook_form_alter trong tệp template.php trong thư mục chủ đề của mình (thay MYTHEME bằng tên chủ đề của bạn):

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

Vì vậy, điều này thêm đánh dấu chính xác vào biểu mẫu, nhưng thật không may, bây giờ chúng tôi có hai nút gửi. Nếu bạn sử dụng kpr ($ form), bạn có thể thấy rằng có một mảng nút gửi mặc định trong $ form ['hành động] [' submit ']. Tôi đã cố gắng loại bỏ nó bằng cách sử dụng unset ($ form ['hành động'] ['submit]); và cả $ form ['hành động'] ['submit'] ['# access'] = FALSE. Cả hai thứ này sẽ thoát khỏi nút gửi mặc định, nhưng thật không may, nó phá vỡ hình thức tìm kiếm trong Drupal để khi gửi, người dùng sẽ được gửi đến trang chủ mà không hiển thị kết quả tìm kiếm. Hành động biểu mẫu trỏ đến trang chủ và sau đó được chuyển hướng đến / search / node / [cụm từ tìm kiếm], vì vậy tôi đoán rằng lõi Drupal thực hiện một số xử lý yêu cầu <input>trường chuyển hướng đến trang kết quả tìm kiếm. Tôi không<button>

Vì vậy, hack của tôi là sử dụng css để đặt <input>nút gửi mặc định thành "display: none", vì vậy biểu mẫu của tôi có hai nút gửi hiệu quả, nhưng nút mặc định bị ẩn và chỉ <button>hiển thị phần tử của tôi với FontAwemme. Bây giờ, chức năng tìm kiếm hoạt động, nhưng dường như không có hai nút gửi trong html. Nếu bất cứ ai có thể cải thiện điều này, tôi sẽ rất biết ơn.

Tôi thường thay thế giá trị nút tìm kiếm thành mã Unicode.

Trong css của bạn chỉ cần xác định fontawgie font-họ.

EG Trong mô-đun của riêng bạn gọi hook_form_alter ()

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

}

Remeber sử dụng decode_entities () để phân tích mã Unicode.

CSS

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

Bạn sẽ nhận được biểu tượng tìm kiếm trên nút và đặt bên trong trường nhập văn bản của bạn.

tham chiếu Font-Awesome

Tôi đã hoàn thành việc này với chức năng chủ đề của riêng mình để tính thêm một cài đặt trong a hook_form_alter. Ví dụ của tôi là thay đổi đầu vào tìm kiếm từ đầu vào thành nút. Từ đó tôi có thể thêm các lớp cho các biểu tượng phần tử giả. Điều này sẽ đi vào template.php với tên máy và id mẫu được hoán đổi.

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

Tất nhiên, bạn có thể thêm một cài đặt khác trong mảng để xử lý đánh dấu bên trong nút. Tôi không có vì một yếu tố nút sẽ cho phép :after& :beforecác yếu tố giả. Thế là đủ để tôi có được một biểu tượng trong đó và chỉ cần ẩn văn bản 'Tìm kiếm' mặc định bằng css.

Đối với Drupal 8:

a) Nếu sử dụng chủ đề Bootstrap, bạn có thể sử dụng thuộc tính cài đặt GLYPHICONS #icon trong khai báo gửi:

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

b) Nếu không sử dụng chủ đề Bootstrap hoặc bạn muốn các biểu tượng khác ngoài Glyphicons (ví dụ: Fontawgie, như trong ví dụ này), bạn có thể tùy chỉnh thêm một chút, như thế này:

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

Tôi hy vọng tất cả điều này áp dụng cho FORM_ALTER quá ....

Đây gần như là giải pháp tương tự như của Steven, nhưng nó thay thế việc <input>gửi bằng <button>thay vì thêm cả hai tồn tại trong HTML. Điều này đi kèm với cùng một điều kiện là IE6 / 7 không hỗ trợ <button>, và thậm chí còn hơn thế bởi vì nó loại bỏ khả năng có cả hai như trong giải pháp của Steven ít nhất sẽ cho phép người dùng IE6 / 7 nhấn Enter ngay cả khi nút hiển thị sẽ không công việc.

Cách tiếp cận dưới đây có lợi ích là nó giữ đánh dấu HTML trong các tệp mẫu.

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

Trong đề xuất mẫu tương ứng hiện có sẵn, chẳng hạn như mẫu / đầu vào - gửi - chỉnh sửa-submit.html , ghi đè lõi input.html.twig bằng:

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

Một tệp mẫu như thế này tất nhiên rất dễ dàng để thay đổi hoặc thêm các lớp hoặc đánh dấu bổ sung.

Vì hình ảnh được thêm thông qua lớp css, bạn không nên sử dụng [#type] => 'image_button'. Hãy thử điều này thay thế:

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