Shift the position of an icon towards the right side

Experiencing an issue while attempting to switch the theme direction to RTL.

https://i.sstatic.net/GSkWb.png

Here is the provided HTML code :

<div class="header_top_right">
<div class="email">email :<a href="#"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b060e0c0504192b0c060a020745080406">[email protected]</a></a></div>
<div class="phone">Phone :<a href="#">01234567890</a></div></div>
</div>

As well as 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 currently displays on the left side of the text, but the goal is for it to appear on the right. Adjusting the background-position only affects the icon, not its position relative to the text.

Is there a solution available?

*PS: Modifying the HTML code is not an option

htmlcsspositionicons

Answer №1

HTML code (unchanged as per your request)

<div class="header_top_right">
<div class="email">Email :<a href="#"> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fa979f9d94">[email protected]</a></a></div>
<div class="phone">Phone :<a href="#">01234567890</a></div>
</div>

Cascading Style Sheets (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;
}

Check out the live demo on this Fiddle link: https://jsfiddle.net/vqzh52d2/3/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind ajax's inability to deliver data to a designated element within a table

Hello, I am currently working on implementing a dependent dropdown list feature. The code works perfectly fine when the <select> is not placed within a table's td element. However, when the select tag is contained within a table td, the ajax f ...

javascriptphpjqueryhtmlajax

Troubleshooting HTML navigation bar white space problem

I am encountering a white space issue with my HTML nav bar for the first time. I have managed to fix the space on the sides (left and right), but there is still some space at the top of the nav bar. Can someone please assist me in resolving this issue? To ...

htmlcss

Store a designated text into a MySQL database by extracting it from every file within a directory

I've encountered various methods for "crawling" websites, but none seem to fit my requirements. I am interested in being able to extract data from each file within an online directory and then store the extracted information into a MySQL database: h ...

phphtmlmysql

What is the best way to update the stylesheet_url value in WordPress?

Recently, while attempting to make modifications to a WordPress theme, I encountered an issue with how the theme was incorporating a stylesheet file. <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ...

csswordpressurlstylesheet

I'm encountering a major issue trying to properly position a background image to fill the entire screen

I am struggling to set a background image that fits the entire screen. It looks great on Windows, but when I view the same page on my mobile device (specifically Android using Google Chrome), the image zooms in and out oddly. Additionally, there seems to b ...

htmlcssbackground

Customizing the appearance of the Bootstrap Typeahead

I've been experimenting with the Bootstrap Typeahead for my search feature. I successfully implemented the dropdown list using Ajax. However, I am looking to customize the width, padding, and background color of the dropdown menu, which is currently w ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips for effectively utilizing the Material-UI Grid component to implement this layout

Currently, I am working on incorporating this design in Material-UI by utilizing the Grid component. To better delineate the boundaries, I have marked the container border in red for clarity. The Add button should be positioned at the far right of the c ...

csslayoutmaterial-ui

Locking mat-toolbar and mat-tabs to the top in Angular Material 2

As I work on my website, my goal is to fix the < Mat-Toolbar > at the top of the screen and then directly underneath that, lock the < Mat-Tabs >. The challenge I'm facing is that the position: fixed in CSS is not working as expected. When ...

javascripthtmlcssangularangular-material

Guide on stacking two divs on each other in response to a decrease in screen width

In this particular section, there is a div labeled programDescriptionDiv. Inside programDescriptionDiv, there are two separate divs. Normally, these two divs each take up 50% of the screen width. The goal is to have the second div stack below the first on ...

htmlcssflexbox

Tips on deleting a section of text inside a div

I have a DataTables implementation that is displaying an input inside a label element like this: <label> Search: <input type="search" class="" placeholder="" aria-controls="example"> </label> My goal is to remove the "Search:" t ...

jqueryhtmldatatables

A guide to making a slanted corner edge using CSS

I'm facing a design challenge with the unique path my main site container takes, especially with the angled part in the middle. I've been struggling to find the right approach to implement it. I'm hoping CSS can help me achieve this, but I& ...

css

Acquiring data without utilizing $_POST and ensuring HTML is properly escaped

In my current project, I have a form class that is being called from the display() method. The display() method retrieves values like name, email, and password using the $_POST method. However, I am interested in obtaining the value of a field without us ...

phphtmlooppostescaping

Updating web content on Android Studio's webView

Is there a method in Android Studio to extract specific text from a page's source code, replace it with different text, and then present the modified page to the user? ...

javaandroidhtmlweb

Menu navigation with animated transitions - Not achieving the desired result

Recently, I posted this question and received a fantastic answer. However, now my client is requesting a hover animation for the navigation items. I started exploring jQuery Spritely as it seemed like the perfect solution. Unfortunately, despite my efforts ...

jquerycss

The hover effect does not work when clicking the mouse button in the Chrome browser

All: [UPDATE] Another method I discovered to achieve this is not a solution, but rather a workaround: Utilize the mousedown event as a trigger (since a drag action is needed, a mousedown event is required), within that, attach a mouseover event to that sp ...

cssgoogle-chromehovermouseovermousedown

PHP and MySQL are having trouble connecting with each other

Seeking guidance in web design, I am utilizing the sublime text editor for PHP development and MAMP server for hosting. However, when I attempt to view my webpage in a browser, it seems like the MYSQL database is connected but the output is not as expected ...

phphtmlmysql

Are there any tools available for converting Arabic HTML to PDF for free?

Converting an HTML page in Arabic to a PDF seems to be a challenge with itextsharp. Below is an example of HTML content with Arabic text: <div> <table border="1" width="500px"> <tr> <td colspan="2"> ...

c#asp.nethtmlitextarabic

Learn how to stream videos using the YouTube Player API's loadPlaylist feature

Is there a way to make the next video play automatically using the loadPlaylist option? I've tried implementing this code but unfortunately, it doesn't work and the video won't play: <div id="player"></div> <script> var ...

javascriptcssyoutubeyoutube-api

Replacing an array in Perl with the contents of a SQL database: A step-by-step guide

Update: (Check Revised Code at the bottom) The code is now functioning properly to retrieve data from 2 databases with some additional cleaning required. However, I'm facing a challenge where the code previously used: next unless $currentuser ~~ @las ...

htmlmysqldatabaseperldbi

I'm unable to modify the text within my child component - what's the reason behind this limitation?

I created a Single File Component to display something, here is the code <template> <el-link type="primary" @click="test()" >{{this.contentShow}}</el-link> </template> <script lang="ts"> imp ...

javascripthtmltypescriptvue.js