Adding icons to field labels

Question

How do I add icons next to field names, like adding a phone icon in front of the mobile phone field?

i tried the patches shown in https://www.drupal.org/node/2050257, but they do not seem to work.

I have seen this on some websites, so I guess it should be possible.

Answer 1

You can change the label using the template_preprocess_field hook.

For instance, if your field was named "phone" and the content type was "business", you could add this to your template.php:

template_preprocess_field (&$variables) {
  $content_type = $variables['element']['#bundle'];
  $field_name = $variables['element']['#field_name'];

  if ($content_type == 'business' && $field_name == 'phone') {
    $variables['label'] = '<img src="http://www.carloancentre.ca/wp-content/uploads/2014/03/Contact-Methods-Phone-icon.png" height="16" width="16"/>' . $variables['label'];
  }
}

Answer 2

You can solve using css

#field-name {
  background-image: url('image/path/ico_phone.png');
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 16px;
}

Answer 3

you need to create field template file and apply css.

see this links : https://api.drupal.org/api/drupal/modules!field!theme!field.tpl.php/7

Answer 4

you need create #field_prefix , add HTML image or element icon font into #field_prefix ! Read Document about form API Drupal

Answer 5

I will advice to fix this issue by using the CSS injector module to add the necessary CSS styles to show an icon before the field label.

Allows administrators to inject CSS into the page output based on configurable rules. It's useful for adding simple CSS tweaks without modifying a site's official theme. The CSS is added using Drupal's standard drupal_add_css() function and respects page caching, etc. The 2.x brach leverages CTools so CSS can be included with Feature changes (ie. CSS that improves the look of a View can be packaged with the View).