How would I fix indentation on an font awesome icon?

Question

How do I fix the indentation whilst using this font awesome icon as list to display advantages?

This is my HTML:

<p> <i class="f_item_tick fa fa-check"></i>
No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into.
</p>

I don't have much CSS applied besides the following to make the tick green:

.f_item_tick {
    color: #00a885;
    font-size:1.8rem;
}

Ideally I want it so the payable is in line with No (See Image)

tao · Accepted Answer · 2018-01-14T21:28:33.590

If you don't want to change the markup, the simplest way is to give the <p> element position:relative and place the icon with position:absolute inside the padded-area:

p {
  padding-left: 2em;
  position: relative;
}

p .fa {
  position: absolute;
  left: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<p> 
  <i class="f_item_tick fa fa-check"></i> 
  No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into. 
</p>

Please note the above code is proof-of-concept and has selectors that are too general to be used in production environment (it would affect all the <p> elements in your project).
To only apply it to (a) particular element(s) you could add a custom class to the desired <p> element(s).

Another option is to get the icon outside of its parent and wrap them together in a parent with display:flex;

.flex-item {
  display: flex;
}
.flex-item .fa {
  padding: 1em 1em 0 0;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
  
<div class="flex-item">
  <i class="f_item_tick fa fa-check"></i>
  <p> No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into. </p>
</div>

Yet another option is to give your text-indent a negative value equal to the sum of margin-left + padding-left properties. You'll need to apply the margin + padding sum to the <i> element, too:

p {
  text-indent: -2em;
  margin-left: 1em;
  padding-left: 1em;
}
p .fa {
  margin-left: 1.5em;
  padding-left: 0.5em;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<p>
  <i class="fa fa-check"></i>No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into. 
</p>

This worked an absolute charm. Thank you very much How would I be able to implement this for a standalone `
@Adam, the principle stands: `position:absolute` positions the child relative to the closest parent with `position:relative` (which should be `

score 2 · Answer 2 · edited Dec 14 '20 at 12:26

Consider using the Font Awesome list-item utility classes, .e.g fa-ul and fa-li

Ref: Font Awesome Examples - List Icons

Code Snippet Demonstration:

.f_item_tick {
  color: #00a885;
  font-size: 1.8rem;
}

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">

<ul class="fa-ul">
  <li><i class="fa-li f_item_tick fa fa-check fa-fw"></i> No upfront payment is required to access the solution. A Nominee and Supervisory fee are both payable once the solution is active. These are taken from the monthly contributions you pay into. </li>
</ul>

score 0 · Answer 3 · answered Jan 14 '18 at 00:24

0

You just need this css:

.f_item_tick {
            color: #00a885;
            font-size:1.8rem;
            display: block;
            float: left;
        }

You could also add padding-right: 10px; to that.

answered Jan 14 '18 at 00:24

WebDevBooster

14,674
9
66
70

So, essentially, you just add those 2 or 3 lines to the class you already have. – WebDevBooster Jan 14 '18 at 00:28
Note that my solution is elegant because it doesn't require you to change anything in your HTML and doesn't require any additional css classes. You merely just add 2 or 3 lines to your existing css class and that's it. – WebDevBooster Jan 14 '18 at 00:33

How would I fix indentation on an font awesome icon?

3 Answers3

Related