CODEWITHSUNDEEP
cssfont-awesome
BaronGrivet
BaronGrivet

Reputation: 4424

Using Font Awesome icon for bullet points, with a single list item element

We'd like to be able to use a Font Awesome ( http://fortawesome.github.com/Font-Awesome/ ) icon as a bullet point for unordered lists in a CMS.

The text editor on the CMS only outputs raw HTML so additional elements/ classes cannot be added.

This means displaying the icons when the mark up looks like this:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

The first problem I can see if Font Awesome requires a different font-family attribute, which would require a separate element.

Is this possible using pure CSS? Or would I have to append the element to the beginning of each list item using something like jQuery?

I realise we can use a fall back of a background image, but it would be great to use Font Awesome if possible.

Upvotes: 148

Views: 258621

Answers (8)

lol
lol

Reputation: 4200

The new Font Awesome makes this really easy to do:

<ul class="fa-ul">
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>Listicons can</li>
  <li><span class="fa-li"><i class="fa-solid fa-check-square"></i></span>be usedto</li>
  <li><span class="fa-li"><i class="fa-solid fa-spinner fa-pulse"></i></span>replace bullets</li>
  <li><span class="fa-li"><i class="fa-regular fa-square"></i></span>in lists</li>
</ul>

https://docs.fontawesome.com/web/style/lists

Upvotes: 172

Chike
Chike

Reputation: 11

I like the icon with a background colour.

ul.mylist {
  list-style-type: none;
}

ul.mylist li {
  margin: 0.5rem;
}

ul.mylist li:before {
  font-family: 'Font Awesome 5 free';
  content: "\f00c";
  font-weight: 900;
  color: white;
  border: 1px solid #00a550;
  padding: 0.2rem;
  margin-right: 0.3rem;
  background: #00a550;
}

Upvotes: 0

Dush
Dush

Reputation: 1365

In Font Awesome 5 it can be done using pure CSS as in some of the above answers with some modifications.

ul {
  list-style-type: none;
}

li:before {
  position: absolute;
  font-family: 'Font Awesome 5 free';
          /*  Use the Name of the Font Awesome free font, e.g.:
           - 'Font Awesome 5 Free' for Regular and Solid symbols;
           - 'Font Awesome 5 Brand' for Brands symbols.
           - 'Font Awesome 5 Pro' for Regular and Solid symbols (Professional License);
          */
  content: "\f1fc"; /* Unicode value of the icon to use: */
  font-weight: 900; /* This is important, change the value according to the font family name
                       used above. See the link below  */
  color: red;
}

Without the correct font-weight, it will only show a blank square.

https://fontawesome.com/how-to-use/on-the-web/advanced/css-pseudo-elements#define

Upvotes: 2

Inluxc
Inluxc

Reputation: 2862

Solution:

http://jsfiddle.net/VR2hP/

ul li:before {    
    font-family: 'FontAwesome';
    content: '\f067';
    margin:0 5px 0 -15px;
    color: #f00;
}

Here's a blog post which explains this technique in-depth.

Upvotes: 269

Marco Allori
Marco Allori

Reputation: 3294

My solution using standard <ul> and <i> inside <li>

  <ul>
    <li><i class="fab fa-cc-paypal"></i> <div>Paypal</div></li>
    <li><i class="fab fa-cc-apple-pay"></i> <div>Apple Pay</div></li>
    <li><i class="fab fa-cc-stripe"></i> <div>Stripe</div></li>
    <li><i class="fab fa-cc-visa"></i> <div>VISA</div></li>
  </ul>

enter image description here

DEMO HERE

Upvotes: 0

Ryan
Ryan

Reputation: 744

I'd like to build upon some of the answers above and given elsewhere and suggest using absolute positioning along with the :before pseudo class. A lot of the examples above (and in similar questions) are utilizing custom HTML markup, including Font Awesome's method of handling. This goes against the original question, and isn't strictly necessary.

DEMO HERE

ul {
  list-style-type: none;
  padding-left: 20px;
}

li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px
}

li:before {
  position: absolute;
  top: 0;
  left: 0;
  font-family: FontAwesome;
  content: "\f058";
  color: green;
}

That's basically it. You can get the ISO value for use in CSS content on the Font Awesome cheatsheet. Simply use the last 4 alphanumerics prefixed with a backslash. So [&#xf058;] becomes \f058

Upvotes: 16

Ricardo Zea
Ricardo Zea

Reputation: 10283

@Tama, you may want to check this answer: Using Font Awesome icons as bullets

Basically you can accomplish this by using only CSS without the need for the extra markup as suggested by FontAwesome and the other answers here.

In other words, you can accomplish what you need using the same basic markup you mentioned in your initial post:

<ul>
  <li>...</li>
  <li>...</li>
  <li>...</li>
</ul>

Thanks.

Upvotes: 1

cereallarceny
cereallarceny

Reputation: 4983

There's an example of how to use Font Awesome alongside an unordered list on their examples page.

<ul class="icons">
  <li><i class="icon-ok"></i> Lists</li>
  <li><i class="icon-ok"></i> Buttons</li>
  <li><i class="icon-ok"></i> Button groups</li>
  <li><i class="icon-ok"></i> Navigation</li>
  <li><i class="icon-ok"></i> Prepended form inputs</li>
</ul>

If you can't find it working after trying this code then you're not including the library correctly. According to their website, you should include the libraries as such:

<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../css/font-awesome.css">

Also check out the whimsical Chris Coyier's post on icon fonts on his website CSS Tricks.

Here's a screencast by him as well talking about how to create your own icon font-face.

Upvotes: 4

Related Questions