Ensuring multi-line text is properly aligned with Font Awesome icons

Question

Ensuring multi-line text is properly aligned with Font Awesome icons

I'm facing a challenge with aligning an icon with text to its right in a multi-lined content. Currently, the setup looks like this:

<p style="text-align: left;">
    <i class="fa fa-example-icon" style="margin-right: 20px;"></i> 
    Text that is multi-lined.
</p>

On the first line, everything seems aligned perfectly:

|icon| Text that is multi-lined.

However, as soon as the text wraps onto the next line, the alignment gets disrupted:

|icon| Text that is multi-lined and now
it actually comes to the next line.

My goal is to achieve the following consistent alignment for all lines:

 |icon| Text that is multi-lined and now
        it actually comes to the next line.

What would be the most effective approach to maintain seamless alignment across multiple lines of text? I have some temporary solutions, but I aim to implement a proper solution.

html css twitter-bootstrap font-awesome

Answer 1

Answer №1

Here is one way to achieve it:

.container{
  width: 200px;  
}
.container, .content{
  overflow: hidden;  
}
.content{
  margin: 0;
}
.fa-custom-icon{
 float: left;
  display: block;
}

<div class="container" style="text-align: center;">
    <i class="fa fa-custom-icon" style="margin-right: 30px;">Icon</i> 
    <p class="content">Text that spans multiple lines. This is an example of multi-line text Text that spans multiple lines. This is an example of multi-line text Text that spans multiple lines. This is an example of multi-line text Text that spans multiple lines. This is an example of multi-line text</p>
</div>

Answer 2

Here is one way to achieve it:

.container{
  width: 200px;  
}
.container, .content{
  overflow: hidden;  
}
.content{
  margin: 0;
}
.fa-custom-icon{
 float: left;
  display: block;
}

<div class="container" style="text-align: center;">
    <i class="fa fa-custom-icon" style="margin-right: 30px;">Icon</i> 
    <p class="content">Text that spans multiple lines. This is an example of multi-line text Text that spans multiple lines. This is an example of multi-line text Text that spans multiple lines. This is an example of multi-line text Text that spans multiple lines. This is an example of multi-line text</p>
</div>

Ensuring multi-line text is properly aligned with Font Awesome icons

Answer №1

Similar questions

The click event in an Angular 6 loop is not being activated

In Javascript, use the replace() function to target and replace text that is not contained

What is the best way to align the 5th and 6th list items to the left using CSS?

Cannot locate the Django bootstrap files

Stop chrome from cropping background images on body while using background-position

CSS Color-Range Conditional Styling

The table is not properly displaying within the parent scrolled div due to issues with the fixed positioning

AngularJS: Default value causes dropdown menu text to not display

Calculating available balance by subtracting the entered amount from the existing balance in Python Django

Exploring the depths of Javascript scope with the Polymer starter-kit 2

Optimizing the use of .less files in an expansive angularjs application

Responsive Audio Tag with Bootstrap 5

Set the background image width to 75% of the screen size

Generate a dynamic form that automatically populates different input fields based on JSON data

"Incorporate Bootstrap drop-down and button together for a stylish group feature

What could be the reason for a missing button in the Bootstrap navbar on smaller devices?

Altering the dimensions of radio button options

What are some ways to restrict the number of words per line?

Check if the page is active using is_page() function

Identify the position of a mouse click event when dots overlap