向右移动图标

Question

将主题方向更改为RTL时出现问题。

我有以下HTML代码：

<div class="header_top_right">
<div class="email">email :<a href="#"> megnor@gmail.com</a></div>
<div class="phone">Phone :<a href="#">01234567890</a></div></div>
</div>

CSS：

.header_top_right .email {
background: url(../images/sprite.png) no-repeat scroll -220px -355px;
margin: 5px 0px;
}
.header_top_right .phone {
background: url(../images/sprite.png) no-repeat scroll -220px -313px;
margin: 5px 0px;
}
.header_top_right .email, .header_top_right .phone {
padding-right: 40px;
float: left;
color: #42474b;
}

图标现在出现在文本的左侧，我希望它在右边。 我改变了背景位置，但它只改变了图标而不是它的位置。

任何解决方案？

* PS：我无法更改HTML代码

Answer 1

HTML（与您相同，因为您说无法更改）

<div class="header_top_right">
<div class="email">Email :<a href="#"> megnor@gmail.com</a></div>
<div class="phone">Phone :<a href="#">01234567890</a></div>
</div>

CSS

.header_top_right > .email {
  background-image: url(https://d30y9cdsu7xlg0.cloudfront.net/png/12633-200.png);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: right; 
}
.header_top_right > .phone {
  background-image: url(https://cdn4.iconfinder.com/data/icons/social-icons-6/40/phone-512.png);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  background-position: right; 
}
.header_top_right > .email, .header_top_right > .phone {
padding-right: 15px;
margin-right: 10px;
float: left;
color: #42474b;
}

小提琴：https://jsfiddle.net/vqzh52d2/3/