0

SSCCE JSFiddle here.

I am using this and this font from font-awesome in my web page. But the less-than and greater-than signs appear really thick. I have given them a size of 90px, because that is how big I want them to be, but not that thick.

The font-weight does not seem to work at all.

Note: The example contains several other CSS properties since they correspond to my real code.

So what can I do to get a very thin font here, like the second image below.

What I have:

enter image description here

What I want:

enter image description here

Solace
  • 8,612
  • 22
  • 95
  • 183
  • 1
    See http://stackoverflow.com/questions/17836851/change-font-weight-of-fontawesome-icons – kranthi117 Apr 13 '15 at 11:34
  • @kranthi117 I see! Can you suggest some other service like that where I could get the thinner font? – Solace Apr 13 '15 at 11:41
  • you could add in your `.left-arrow` and `.right-arrow` classes `-webkit-text-stroke: 4px grey; ` and then play around with the px and the correct color of course. – gpap Feb 14 '20 at 13:04

2 Answers2

2

I do not think it's possible. Because it is a font that uses images. The proportion of the images can not be changed (to be thinner, for example).
The images can be enlarged and narrowed simply because it is scalable.

Bluety
  • 1,869
  • 14
  • 22
-3

Have you tried:

.fa-angle-right {
    font-weight: lighter;
}
Michael Irigoyen
  • 22,513
  • 17
  • 89
  • 131
franklinexpress
  • 1,149
  • 14
  • 44
  • As I mentioned in the question, `font-weight` is not working at all, with any value. You can check in the Fiddle. – Solace Apr 13 '15 at 12:01