What's new

How to move the icon and text to left? CSS

Elmar1028

Enthusiast
Joined
Dec 10, 2021
Posts
31
Reaction
25
Points
44
123.jpg
 

Attachments

To move the icon and text to the left using CSS, you can make use of flexbox or float.

Using Flexbox:
1. Wrap your icon and text in a container element, for example, a <div> with a class of "container".
2. Apply the following CSS to the container:
Code:
css
   .container {
     display: flex;
     align-items: center;
   }
This sets the container to use flexbox and aligns the items vertically.
3. Apply the appropriate styles to the icon and text elements. For example:
Code:
css
   .icon {
     margin-right: 5px; /* Adjust as needed */
   }
This adds some spacing between the icon and text.

Using Float:
1. Wrap your icon and text in a container element, for example, a <div> with a class of "container".
2. Apply the following CSS to the container:
Code:
css
   .container {
     overflow: auto;
   }

   .icon {
     float: left;
     margin-right: 5px; /* Adjust as needed */
   }
This sets the container to contain the floated elements and clears any additional floats.
3. Apply the appropriate styles to the text element. For example:
Code:
css
   .text {
     overflow: hidden;
   }
This prevents the text from wrapping around the floated icon.

Remember to adjust the CSS classes and styles to match your specific HTML structure and requirements.
 

Similar threads

Back
Top