How to change the "Report" icon?

[Anne Moss]

I want to change the "Report" message under each post. Right now it shows up like this -

I want to change the triangle into a little flag and the text from "Report" to "Flag". I guess the text is a phrase? I'm not sure where to change the icon though and how.

 

[Russ]

It's Font Awesome, so you can use CSS inside extra.css:

.message .item.control.report:before {content : "\f13d";}

Using a code from here:
http://fontawesome.io/cheatsheet/

 

[Anne Moss]

All done - thank you!

 

[Anne Moss]

Same question about the Like icon please?

I'd like to change it from a thumbs-up into a heart icon.

I tried this code in the extra css -
}
.message .item.control.like:before {content : "\f004";}

But that didn't work. I guess "like" isn't the word I need?

 

[Russ]

Looks good but is the } apart of the code you copied? Having a n extra closing bracket may broke the css after it.

 

[Anne Moss]

And a general question. Do phrases get "packed" along with a skin/template? Or would we have to re-do them again in a new installation?

 

[Russ]

And a general question. Do phrases get "packed" along with a skin/template? Or would we have to re-do them again in a new installation?

If you edit the English phrases then you'll need to export that as well. It's a different export found in Appearance -> Phrases, you can export your language pack. Then import and overwrite on your new install

 

[Anne Moss]

Oops, yes, there was an extra bracket there. I knew there was a reason I never became a coder Thanks for the additional info on the language. Will export that as well.
One more question please. I just realized I need to change the thumbs up here as well (under the username/title) -

Can you please let me know what's the corresponding CSS? I tried changing "message" for "tooltip" but that didn't work...

 

[Anne Moss]

@Russ I think maybe you missed my last question, so bumping this thread.

 

[Russ]

You can change that css I gave you first to this:

.message .item.control.like:before, .xbLikes .fa:before {content : "\f004";}

It'll fix both spots.

 

[Anne Moss]

I'm afraid it didn't affect the user profile tidbit though. Here's the result of that code. The thumbs-up under the post got converted but the overall user count still shows a thumbs up.

 

[Russ]

The CSS definitely works out our setup, are you using post ratings by chance? I may need to see it live to inspect the css

 

[Russ]

Doesn't look like the modified the CSS:

Red is what you had, green is what it should of been changed too. Appears to be working now.

 

[Anne Moss]

Awesome! Thank you!