2

I have a web site where the font icons works fine into English language (LTR) but when change site language to Arabic (RTL) the icons appears as missed and some strange letters.

See the image below. The top part is Arabic and button part is English. Why this happens and what is the solution?

Zanon
  • 29,231
  • 20
  • 113
  • 126
Muhamed Auda
  • 25
  • 5

3 Answers3

1

I suspect that your RTL font declaration is to loosely specified and using an !important, so it simply overrides the font-face declaration required for FontAwesome.

There's no reason why you shouldn't be able to use Fontawesome icons in a RTL site but they will always be in the wrong position (to the left of your word) unless you add some additional code to reposition the icons in RTL.

I assume you already know that Bootstrap does not natively support RTL languages.

Seth Warburton
  • 2,234
  • 1
  • 16
  • 17
  • This is probably a correct analysis, as the image shows symbols with numbers like F15B in them, apparently indicating the presence of Private Use codepoints (which are used by FontAwesome). – Jukka K. Korpela Oct 21 '14 at 10:27
0

I have found the answer. the problem the site can not display font icon when visit site without www but i visit site with www it work fine ... so I just for my site to work using www I used a role in file .htaccess in root of my site folder. .htaccess rule can be found here

Community
  • 1
  • 1
Muhamed Auda
  • 25
  • 5
0

Add this to parent of icon.

style="direction:rtl"

That works for me.

Chathuranga Jayanath
  • 496
  • 6
  • 11