CODEWITHSUNDEEP
htmlcsspositionicons
Mehdi Ytr
Mehdi Ytr

Reputation: 52

Move an icon to the right

I have an issue when changing a theme direction to RTL.

enter image description here

I have the following HTML code :

<div class="header_top_right">
<div class="email">email :<a href="#"> [email protected]</a></div>
<div class="phone">Phone :<a href="#">01234567890</a></div></div>
</div>

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

The Icon now appear on the left of the text, I want it to be in the right. I changed the background-position but it only change the icon not it's position.

Any solution?

*PS : I can't change the HTML code

Upvotes: 0

Views: 18691

Answers (1)

Guillaume
Guillaume

Reputation: 586

HTML (same as you because you said you can't change it)

<div class="header_top_right">
<div class="email">Email :<a href="#"> [email protected]</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/

Upvotes: 2

Related Questions