How to show an image beside the text

Last updated on
30 April 2025

What if we want to show a little icon to the left of the link text?

A common CSS technique is to add padding to the left of the text and in it show a backgorund image:

.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;
}

Replace "bookmarks" with the machine-name of your flag.

Another Option For Placing an Image Next to Text Using Views

If you are showing the flag and counter links using views (preferred method when using panels), then you can simply add images next to links by selecting the "rewrite the output of this field" and customizing the layout of the link using tokens and Only local images are allowed. tags.

Help improve this page

Page status: Not set

You can: