CODEWITHSUNDEEP
htmlcssfont-awesome
Loko
Loko

Reputation: 6679

How to get fontawesome "icons as bullet points" to get the property list-style-position: outside?

So there is this link on the official font-awesome website about using their icons in a bulletpoint: https://fontawesome.com/how-to-use/on-the-web/styling/icons-in-a-list

Which states you can do it like this:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>List icons can</li>
  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
</ul>

This looks like the icons are just being put in the li and not actually being the bullet points. Now I want to make sure whenever there's a new line of text for one of the bulletpoints, I want it to start on the same line as the text started on the previous line. However it's not doing that. It starts on the same line as the icon.

An example of how it is:

enter image description here

An example of how I want it:

enter image description here

(Ignore the table around it)

I have already tried list-style-position: outside;, but:

list-style-position: outside; means that the bullet points will be outside the list item. The start of each line of a list item will be aligned vertically

So it sounds logical that the next line of text aligns with the icon cause the icons are part of the content of the list items.

Upvotes: 1

Views: 1990

Answers (2)

SeeoX
SeeoX

Reputation: 604

By default, it already behave as you want

Notes : can't show you code in comment. It isn't an answer to your question as you certainly have problem otherwise on your code.

<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <ul class="fa-ul">
    <li><span class="fa-li"><i class="fa fa-check-square"></i></span>List with<br/>new line</li>
    <li><span class="fa-li"><i class="fa fa-spinner fa-pulse"></i></span>List with<br/>new line<br/>new line<br/>new line<br/>new line</li>
    <li><span class="fa-li"><i class="fa fa-square"></i></span>hello, i have no new line</li>
  </ul>
</body>

Upvotes: 1

Myko
Myko

Reputation: 1

The fontawesome's bullets are positioned as you wanted, outside.

This is done by the inclusion of the fa-li class in the span tag.

<span class="fa-li">

and the css that goes with it:

.fa-li {
    left: -2em;
    position: absolute;
    text-align: center;
    width: 2em;
    line-height: inherit;
}

This style is from fontawesome.css which needs to be included.

Upvotes: 0

Related Questions