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.

Comments

sp09’s picture

sp09 commented

Which css file does that code go into?

ggevalt’s picture

ggevalt commented

The Flag module is very useful and I'm appreciative to eveyrone who's put in a lot of great work on it over the years. But I am having a bear of a time replacing the link_text with an image or even putting an image alongside the link_text.

I've tried without success the solution suggested here and the solutions on the next page ("How to show images instead of text" though the maintainers' suggestions are for D6 and D5 and I'm using D7 -- solutions suggested in comments also don't seem to work.) It looks as though this documentation has not been updated in quite a few years and this one has a valid question that hasn't been answered. (I believe it's flag.css, but you asked four years ago so I doubt this is of much use.)

In this case, I inserted the suggested CSS code for Flag 7.3 module in the flag.css found in the bookmark sub-module. The image does not load. I've double-checked the location, folder permissions and file name. (I am on a test installation on my Mac so am using a MAMP localhost address.)

Any help out there? This seems like a logical functionality -- that is, replacing link-text with an icon/image. It would be great if someone could pass on a little knowledge.

Thanks,

geoff

geoff gevalt
http://www.youngwritersproject.org
http://www.ywpschools.net
http://geoffreygevalt.com

metakel’s picture

metakel commented

The CSS code for Drupal 8 is a little bit different. I have included my code for your reference. Change the CSS selector .flag-like to your own names.

.flag-like a {
  padding-left: 25px;
}

.flag-like.action-flag a {
  background: url("../images/bookmark-heart.png") no-repeat left center;
  background-position: -10px -10px;
}

.flag-like.action-unflag a {
  background: url("../images/bookmark-heart.png") no-repeat left center;
  background-position: -10px -38px;
}