Add icon to Flag link
Last updated on
22 February 2025
A toggle link, such as the one Flag module offers, normally uses an icon to indicate if the thing is flagged or not.
This CSS adds a green star or an outlined version to the left of the link. You should make a local copy of the two svg images, and use them instead.


.action-flag, .action-unflag {
border: 1px solid #ddd;
border-radius: 4px;
display: inline-block;
padding: 0.2em 0.5em;
}
.action-flag a, .action-unflag a, .action-unflag a:hover {
background: url(https://www.drupal.org/sites/all/themes/bluecheese/images/icon-green-star.svg) transparent left center/1.5em no-repeat;
color: #4e4e4e;
padding: 0.2em 0.2em 0.2em 2em;
text-decoration: none;
}
.action-unflag a, .action-flag a:hover {
background: url(https://www.drupal.org/sites/all/themes/bluecheese/images/icon-green-star-fill.svg) transparent left center/1.5em no-repeat;
}Help improve this page
Page status: No known problems
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