html - 向右移动图标

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;
}

fiddle :https://jsfiddle.net/vqzh52d2/3/