Align icon to right of text (RTL site) with CSS - css

Question

I'm working on a right to left aligned website (in Hebrew) and would like the icons to appear to the right of the text. For example: http://kaptinlin.com/themes/striking/shortcodes/typography/ at the bottom Contact Us widget, the icon is on the left, I want it on the right.
Here is the relevant code (HTML):
<section id="contact_info-3" class="widget widget_contact_info">
<h3 class="widgettitle">Contact Us</h3>
<p><span class="icon_text icon_phone default">([phone]</span></p>
<p class="contact_address">
<span>city, state</span>
<span class="contact_zip">1111</span>
</p>
</div>
</section>
CSS:
.icon_text {
padding: 0 22px 0 0;
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
}
#footer .icon_text.default {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/footer_icons.png");
}
.icon_globe {
background-position: -390px 0px;
}
.icon_home {
background-position: -360px -30px;
}
.icon_email {
background-position: -330px -60px;
}
.icon_user {
background-position: -300px -90px;
}
.icon_multiuser {
background-position: -270px -120px;
}
.icon_id {
background-position: -240px -150px;
}
.icon_addressbook {
background-position: -210px -180px;
}
.icon_phone {
background-position: -180px -210px;
}
.icon_link {
background-position: -150px -240px;
}
.icon_chain {
background-position: -120px -270px;
}
.icon_calendar {
background-position: -90px -300px;
}
.icon_tag {
background-position: -60px -330px;
}
.icon_download {
background-position: -30px -360px;
}
.icon_cellphone {
background-position: 1px -390px;
}
.icon_text.default {
background-image: url("http://kaptinlin.com/themes/striking/wpcontent/themes/striking/images/icons_black.png");
}
.icon_text.black {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_black.png");
}
.icon_text.gray {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_gray.png");
}
.icon_text.red {
background-image: url("../images/icons_red.png");
}
.icon_text.orange {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_orange.png");
}
.icon_text.magenta {
background-image: url(http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_magenta.png);
}
.icon_text.yellow {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_yellow.png");
}
.icon_text.blue {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_blue.png");
}
.icon_text.pink {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_pink.png");
}
.icon_text.green {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_green.png");
}
.icon_text.rosy {
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons_rosy.png");
}
Thanks.

Answer 1

Your icons are background-images so in short you need to adjust the padding, background-position and text-align properties to move it from the left to the right side.
You need to make a few adjustments. First you need to make sure the padding is set to the right side instead of the left side. Then you need to adjust the background-position to put the icons on the right:
.icon_text {
padding: 0 22px 0 0; /* changed from 0 0 0 22px on live site*/
background-image: url("http://kaptinlin.com/themes/striking/wp-content/themes/striking/images/icons.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-color: transparent;
}
.contact_info_wrap .icon_text, .contact_info_wrap .contact_address {
padding-right: 26px; /* changed from padding-left on live site */
}
.icon_phone { /* obviously you would change each of the icons as necessary */
background-position: -72px -210px; /* changed from -180px -210px */
}
However doing this will lead to your icons not being in line with each other down the right side. So you will want to align the text to the right by adjust the p tags:
.contact_info_wrap p {
margin-bottom: 5px;
text-align: right; /* add this */
}
I would guess you would also want your titles to be aligned so:
#footer h3.widgettitle {
color: #FFFFFF;
font-size: 24px;
text-align: right; /* add this */
}

Answer 2

Should you need any further assistance on your rtl question, please visit the Striking support forum and we will assist you. RTL is generally straightforward. We can provide you the code for moving all body text to rtl, and assist with any particular element for which you are uncertain of the element movement.