I'm working on a 'sample request' implementation for a commerce site using Flag, Views, sessions and a little custom code.

I'd like to add an icon or a symbol to let people know that an item they are viewing has been flagged.

I'm not sure exactly how to approach this, I can imagine perhaps adding a conditional field that displays an image or check box that is then changed by Rules or ajax, or perhaps something more complicated in JavaScript?

It could really be as simple as adding a checkbox that is checked or unchecked as the flag link is clicked or maybe even changing the css/html on click to be identified as marked.

Anyway, grateful for any advice here.

6 Answers 6


Option 1: Show an image beside the Flag text

You can use CSS to add padding to the left of the text and in it show a background image, as shown also in the community documentation about How to show an image beside the text. Here is an excerpt from it (replace "bookmarks" with the machine-name of your flag):

.flag-bookmarks a {
  padding-left: 20px;
.flag-bookmarks a.flag-action {
  background: url(images/i-dont-like-it.png) no-repeat left center;

.flag-bookmarks a.unflag-action {
  background: url(images/i-like-it.png) no-repeat left center;

Refer to the Flag Theming guide for (way) more details, i.e.:

  • Theming flag links using CSS, which provides a "map" of the HTML that makes a flag link.
  • Theming flag links using Templates, which explains how to use the flag.tpl.php file in the 'theme' folder that is located inside Flag's own folder, and which is used to generate the HTML for the Flag links. It also explains how you can theme different flags differently, using a flag specific flag--FLAGNAME.tpl.php file (whereas FLAGNAME is the flag's machine-name).
  • Theming examples, which contains solutions to some common theming tasks.

Option 2: Transform Flag link into a button

You can transform the Flag link into a button, by adding this CSS (quote from that link):

.flag-wrapper.{flag-name} a.flag-action {
  background-image: url('path to the button image');
.flag-wrapper.{flag-name} a.unflag-action {
  background-image: url('path to the button image');


  • text-indent:-9999em hides the element (by placing it off the screen).
  • Replace .{flag-name} with your flag's machine-name.
  • Hi Pierre, having a little trouble targeting the correct css
    – nizz0k
    Commented Sep 19, 2015 at 21:16

If you are using the Flag module for rendering the flag link, then you can use following code for showing images instead link text:

function theme_preprocess_flag(&$vars){
    $state = ($vars['action'] == 'flag' ? 'off' : 'on');
    $image_file = $vars['directory'] . '/images/flag-' . $vars['flag']->name . '-' . $state . '.png';
    if (file_exists($image_file)) {
        $vars['link_text'] = theme_image(array('path' => $image_file,   'attributes' => 
        array('class' => array('flag-' . $vars['flag']->name . '-' . $state))));

After using this code in template.php place images in your theme directory named like flag-flag_machine_name>-off|on.png.


Paste this code in template.php

function Your_theme_preprocess_flag(&$vars) {
  $class = ($vars['action'] == 'flag') ? '<i class="fa fa-heart-o">   </i>' : '<i class="fa fa-heart"></i>';
  $vars['link_text'] = $class;
  $title_wishlist = ($vars['action'] == 'flag') ? 'Add to wishlist' : 'Remove from wishlist';
  $vars['link_title'] = $title_wishlist;
  • This is for an icon (FA icon shown), not an image (as per post), but was what I was actually looking for. Works great, thanks! Commented Sep 29, 2015 at 18:26
  • @vamsi where to put my flag machine name?
    – Umair
    Commented Dec 14, 2016 at 13:28
  • 1
    Try to print $vars, you may find the machine name. I am not sure about this.
    – Vamsi
    Commented Dec 15, 2016 at 11:15
  • @Vamsi so you mean if I put this code in the template.php file, it will change every type of flag on my website to heart icon? I have different flags. for example "like" "follow" etc etc
    – Umair
    Commented Dec 15, 2016 at 13:29
  • Yes it will change every type of flagto hearct icon. In $vars there should be flag machine name add if check so it will reflected only for particular flags.
    – Vamsi
    Commented Dec 16, 2016 at 11:54

After you copy the tpl file at sites/all/modules/your_flag_module_name/flag_tpl_file to your sites/all/themes/your_theme_name/templates/paste tpl file, you can change your tpl design according to your choice.

All variables are available on this tpl like flag status, etc.

  • This really is the easiest and best way to do this. Commented Mar 11, 2017 at 16:27
  • its working fine Commented Aug 7, 2017 at 8:58

With a Bootstrap theme (glyphicons built in) you can add an icon directly in the flags' text field (where you normally enter the text of the flag link) as well. Instead of writing the text enter something like this:

<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>

enter image description here


I know this is older post, but I wanted to add a simple solution using Fontawesome module and Flags module.

When creating a flag it asked you what text you want to type for the flag both “flag link text” and “unflag link text”

You can paste a fontawesme code in these boxes and it will render the fontawesome icons in the pages. This even works with views too. So add something like

<i class="far fa-bookmark"></i>

in those setting boxes, and it will work.

enter image description here

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.