# Show an image beside the Flag text
A common CSS technique is to add padding to the left of the text and in it show a backgorund image, as shown also in the Community Documentation about [How to show an image beside the text][1]. 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][2] for (way) more details, i.e.:

- [Theming flag links using CSS][3].
- [Theming flag links using Templates][4].
- [Theming examples][5].

# Transform Flag link into a button

Another approach is to [transform the Flag link into a button][6], by adding this CSS (quote from that link):

    .flag-wrapper.{flag-name} a.flag-action {
      background-image: url('path to the button image');
      display:block;
      text-indent:-9999em;
    }
    .flag-wrapper.{flag-name} a.unflag-action {
      background-image: url('path to the button image');
      display:block;
      text-indent:-9999em;
    }

**Note**:

- `text-indent:-9999em` hides the element (by placing it off the screen).
- Replace `.{flag-name}` with your flag's machine-name.

  [1]: https://www.drupal.org/node/305066
  [2]: https://www.drupal.org/node/295346
  [3]: https://www.drupal.org/node/295367
  [4]: https://www.drupal.org/node/295373
  [5]: https://www.drupal.org/node/305060
  [6]: http://www.zyxware.com/articles/3096/drupal-to-change-flag-module-flag-links-to-buttons-in-drupal-7-using-css