Advertising sustains the DA. Ads are hidden for members. Join today

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.

Add farvorite

Remove favorite

.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: