Some uses for directional icons depend on the language direction. For example, imagine a collapsible menu. When collapsed, there might be a right arrow:
> Items (3)
When expanded, a down arrow:
V Items (3)
Item 1
Item 2
Item 3
However, if the language is right-to-left, you would want a left arrow for the first example.
I was thinking about including something like the following, here presented only for illustration:
/* Directional icons that point in the writing direction (and opposite to it). */
html[dir="ltr"] .fa-arrow-dir {
/* CSS for fa-arrow-right */
}
html[dir="ltr"] .fa-arrow-flipdir {
/* CSS for fa-arrow-left */
}
html[dir="rtl"] .fa-arrow-dir {
/* CSS for fa-arrow-left */
}
html[dir="rtl"] .fa-arrow-flipdir {
/* CSS for fa-arrow-right */
}
That would allow cases where you want a directional icon pointing in the writing direction to have something like:
<i class="fa fa-arrow-dir"></i> Expanded
Of course it would depend on the html tag having an appropriate dir attribute.
Hello,
Some uses for directional icons depend on the language direction. For example, imagine a collapsible menu. When collapsed, there might be a right arrow:
When expanded, a down arrow:
However, if the language is right-to-left, you would want a left arrow for the first example.
I was thinking about including something like the following, here presented only for illustration:
That would allow cases where you want a directional icon pointing in the writing direction to have something like:
Of course it would depend on the
html
tag having an appropriatedir
attribute.Thoughts?