How to change font awesome arrow


#1

I can’t figure out how to change font awesome arrow. It is icon-chevron-right and in CSS it is coded as:

.icon-chevron-right:before,
.icon-rightarrow:before,
.icon-arrow-right:before {
  content: "\e006";
}

How do I know what icon \e006 is and what \xYYY should I use?

<span class="icon-chevron-right" aria-hidden="true"></span>

Arrow pointing to the right -> Next page icon-chevron-right


#2

You don’t need to know anything about the css. You just choose the class name to add to your element from the available font awesome icons.

You don’t edit the font awesome css at all. Just choose the icon you want as they are all listed on the font awesome site.

Or did you mean something else?


#3

As @PaulOB already said. :slight_smile:

But I see you haven’t the correct font family set, try change it to FontAwesome:

[class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: 'IcoMoon'; /* wrong */
   font-family: 'FontAwesome'; /* correct */
   font-style: normal;
   speak: none;
}

#4

Without knowing what OS you have on your machine I suggest you find a built in utility called “Character Map” or like.

Go to the “Private Use Area” in the map list to find icons. There you can view and search for icon like characters and see what U+xYYY code to put as content (If you look in the character description, it’s the UTF-16 number you want)

As @PaulOB already said, you set the icon you want by using the class name for it in the html. That is how it is set up now in the site you linked to.

As I mentioned above, the site is using the “Ico-Moon” font imported from the “template.css”: /2015/helix3/media/mod_languages/css/template.css and the ruleblock you posted is in that file.

If you want to use the “Awesome” font instead you have to change font family and unicode to match the icon you want.

Hoping I correctly understood the issue. :slight_smile:


#5

Sorry maybe I was not so good to describe the issue. That was it. I haven’t heard about IcoMoon icons before. Had to change that to FontAwesome as you suggested and picked up the right one:

[class^="icon-"]:before, [class*=" icon-"]:before {
   font-family: 'FontAwesome'; /* correct */
   font-style: normal;
   speak: none;
}
.icon-chevron-right:before,
.icon-rightarrow:before,
.icon-arrow-right:before {
  content: "\faXXX";
}