Add bootstrap icons next to fields in node page

Question

In my views I can do this easily using the rewrite results and writing this line

<span class="glyphicon glyphicon-earphone list-icon"></span>  [field_business_phone]

How can I do the same with the node page. It doesn't necessarily have to be a rewrite method but I am looking for an easy method of doing this. The end result I am looking for is something like this.

Answer 1

Use the preprocess function, like:

function YOUR_THEME_preprocess_field(&$variables) {
  $element = $variables['element'];

  if (isset($element['#field_name'])) {
    if($element['#field_name'] == 'field_business_phone') {
      foreach ($variables['items'] as $k => $value) {
        $variables['items'][$k]['#markup'] = '<span class="glyphicon glyphicon-earphone list-icon"></span>' . $variables['items'][$k]['#markup'];
      }
    }
  }
}

Or overwrite the field templates, in a file named field--field-business-phone.tpl.php, containing something like:

<?php

<div class="<?php print $classes; ?>"<?php print $attributes; ?>>
  <?php if (!$label_hidden): ?>
    <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?>:&nbsp;</div>
  <?php endif; ?>
  <div class="field__items"<?php print $content_attributes; ?>>
    <?php foreach ($items as $delta => $item): ?>
      <div class="field__item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<?php print $item_attributes[$delta]; ?>><span class="glyphicon glyphicon-earphone list-icon"></span> <?php print render($item); ?></div>
    <?php endforeach; ?>
  </div>
</div>