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.

5 Answers 5


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

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;

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

  • Creating a template file is not a need.
    – apaderno
    Mar 9, 2015 at 11:30

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


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).

  • Will try this and get back to you. Although a gui would be ideal Mar 8, 2015 at 9:33
  • It would be useful to show the OP the CSS selector necessary to select a field label.
    – apaderno
    Mar 9, 2015 at 11:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.