FortAwesome / Font-Awesome

The iconic SVG, font, and CSS toolkit
https://fontawesome.com
Other
73.7k stars 12.19k forks source link

Idea: Direction-dependent directional icons #4349

Open elad opened 10 years ago

elad commented 10 years ago

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:

> 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.

Thoughts?

tagliala commented 10 years ago

refers to #3505