2

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.

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'];
  }
}
| improve this answer | |
1

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;
}
| improve this answer | |
0

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

| improve this answer | |
  • Creating a template file is not a need. – kiamlaluno Mar 9 '15 at 11:30
0

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

| improve this answer | |
-1

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

| improve this answer | |
  • Will try this and get back to you. Although a gui would be ideal – AbdealiJK Mar 8 '15 at 9:33
  • It would be useful to show the OP the CSS selector necessary to select a field label. – kiamlaluno Mar 9 '15 at 11:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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