Font awesome with RTL language

[osherez]

Hey all thanks to all in advance,
I’m running with an issue when changing to RTL language and Font Awesome. It seems to me that there
is no easy way to position the icons to the right and keeping the text aligned no matter the length. you can check out this Fiddle link to see what I mean.

Hoping you guys have a better solution to this Cheers :)

link : https://jsfiddle.net/osherez/5pbe963z/17/

[Paulie_D]

I’m not sure what the intended result is supposed to look like.

Can you explain further?

[osherez]

Hey Paulie_D,

First of all thanks :). there is an issue when using RTL languages with ul list and font awesome.
I’m trying to make a ul list that is centered to the middle of the div while keeping the FA icons aligned to each other no matter how long the text is.

I’v managed to do so With English following a stack-overflow thread, but In Hebrew it doesn’t work. the length of the text breaks the alignment of the icons. hope I’m more clear now.

you can check the fiddle bellow for more visual understanding thanks.

https://jsfiddle.net/osherez/5pbe963z/53/

[Paulie_D]

Unfortunately, a description isn’t really clear to me…it’s probably my fault.

Do you have an image of what this is supposed to look like?

I’m assuming that the absolute positioning of the icons is a FA thing…but I haven’t seen it used like that before.

[osherez]

Hey,

Sorry if I wasn’t clear again hah, This is the issue:

https://imgur.com/a/m3Qo0

[Paulie_D]

Hmmm…I suspect it could be done but my tinkering suggests that you’d have to re-write FA’s CSS to do it.

I’ll have a think though.

[Paulie_D]

Ok….it seems to me that this issue is the absolute positioning used in the .fa-li class.

If we lose that, we can tinker with flexbox to get this to work.

https://codepen.io/Paulie-D/pen/eVyrQL

It’s a quick and dirty solution but I think it works.

[osherez]

You are a magician :))
plus I’v font one more solution using:

direction:rtl

list-style-position: inside;

but, I’m glad I’v learned something new with your option thank you appreciate a lot :)

[Author]

Posts