font awesome sort icon pointed to right

Question

I want to use font-awesome icon fa-sort-asc in color white and want it to be pointing towards right direction

<i class="fa fa-sort-asc" aria-hidden="true"></i>

Is this possible?

Answer 1

The sort icons point up and down. If you want to point right, don't use the sort icons.

The Font-Awesome icon list includes "caret right" which appears to be what you want.

Make it white as you would make anything white in CSS.

Answer 2

If you really want to point fa-sort-asc icon to right, you can use CSS3 transform property to rotate it 90°.

Also, you can use fa-inverse class to make it white.

HTML:

<i class="fa fa-sort-asc fa-inverse rotate90" aria-hidden="true"></i>

CSS:

.rotate90 { transform: rotate(90deg); }

---

body {
  background: gray;
}

.rotate90 {
  transform: rotate(90deg);
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />

<i class="fa fa-sort-asc fa-inverse rotate90" aria-hidden="true"></i>