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
tags.
Help improve this page
Page status: Not set
You can:
You can:
- Log in, click Edit, and edit this page
- Log in, click Discuss, update the Page status value, and suggest an improvement
- Log in and create a Documentation issue with your suggestion