Flip Directional Icons in Right-to-Left Languages
Mirrors arrows, chevrons and other directional icons when the page is right-to-left, so "next" and "back" point the right way in Arabic, Hebrew and Persian.
Opens WPIDE on
Code
[dir="rtl"] .icon-arrow-right,
[dir="rtl"] .icon-arrow-left,
[dir="rtl"] .icon-chevron-right,
[dir="rtl"] .icon-chevron-left,
[dir="rtl"] .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-next,
[dir="rtl"] .wp-block-post-navigation-link .wp-block-post-navigation-link__arrow-previous,
[dir="rtl"] .wp-block-query-pagination-next-arrow,
[dir="rtl"] .wp-block-query-pagination-previous-arrow,
[dir="rtl"] .flip-in-rtl {
display: inline-block;
transform: scaleX(-1);
}Notes
Add your theme's icon classes to the selector list; logos and clocks should not be flipped.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.