Using Font Awesome Icon for Bullet Points, with a Single List Item Element

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

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.

Styling list items, replacing bullet with fontawesome

.custom_list li {
 line-height:2em;
 padding-left:0px;
 padding-top:5px;
 padding-bottom:5px;
 font-size:14px;
 list-style-type:none;
 list-style:none;
 display: table-row;
}
.custom_list li:before {
 font-family: 'FontAwesome';
 content: "\f192";
 color: black;
 margin-right:15px;
 display: table-cell;
}

You need to change your list format to table

Using Font Awesome icons as bullets

The answer by Johan is incorrect.
Font Awesome uses web fonts, NOT a large background image!

It should be noted you can simply put the class onto the li tags, like so:

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

However, there's one caveat, it won't work in ie7, even with the conditional ie7 stylesheet.
The list items disappear, just leaving the icons!
If your not supporting ie7, then simply leave out the conditional stylesheet, then at least those unfortunate enough to be using ie7 will still be able to read your lists, sans icons!

Hope this helps.

Custom li list-style with font-awesome icon

The CSS Lists and Counters Module Level 3 introduces the ::marker pseudo-element. From what I've understood it would allow such a thing. Unfortunately, no browser seems to support it.

What you can do is add some padding to the parent ul and pull the icon into that padding:

ul {
  list-style: none;
  padding: 0;
}
li {
  padding-left: 1.3em;
}
li:before {
  content: "\f00c"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  margin-left: -1.3em; /* same as padding-left set on li */
  width: 1.3em; /* same as padding-left set on li */
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul>
  <li>Item one</li>
  <li>Item two</li>
</ul>

Dynamically creating lists with font-awesome icons instead of bullet points

I think you got the class names wrong:

p Test
  |  ##
  span.fas.fa-file-alt
  |  !! 
  span.far.fa-folder-open
  |  ##
-
  const tickets = [ 
    { status: "file", description: "Hello World"},
    { status: "x", description: "test"}]
each ticket in tickets 
  li(style="list-style-type:none")
    - const status = ticket.status === "file" ? [ "fa", "fa-file"] : [ "fa", "fa-folder-open"]
    i(class=status)  
    |  
    a(href="#")=ticket.description

produces:

Sample Image

The link to the Fontawesome css file has to be there. I tried with both versions 4.4 and 4.7 and the results were the same.

Using Font Awesome to custom a li-element - a bit complicated case

This hand pointer you mean?

function theChampInitiateFB(){}

li.theChampSelectedTab {list-style-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path d="M256 1344q0-26-19-45t-45-19-45 19-19 45 19 45 45 19 45-19 19-45zm1408-576q0-51-39-89.5t-89-38.5h-576q0-20 15-48.5t33-55 33-68 15-84.5q0-67-44.5-97.5t-115.5-30.5q-24 0-90 139-24 44-37 65-40 64-112 145-71 81-101 106-69 57-140 57h-32v640h32q72 0 167 32t193.5 64 179.5 32q189 0 189-167 0-26-5-56 30-16 47.5-52.5t17.5-73.5-18-69q53-50 53-119 0-25-10-55.5t-25-47.5h331q52 0 90-38t38-90zm128-1q0 105-75.5 181t-180.5 76h-169q-4 62-37 119 3 21 3 43 0 101-60 178 1 139-85 219.5t-227 80.5q-133 0-322-69-164-59-223-59h-288q-53 0-90.5-37.5t-37.5-90.5v-640q0-53 37.5-90.5t90.5-37.5h288q10 0 21.5-4.5t23.5-14 22.5-18 24-22.5 20.5-21.5 19-21.5 14-17q65-74 100-129 13-21 33-62t37-72 40.5-63 55-49.5 69.5-17.5q125 0 206.5 67t81.5 189q0 68-22 128h374q104 0 180 76t76 179z"/></svg>');}

<ul>    <li id="theChampTabs-0-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-0').style.display='block';document.getElementById('theChampTabs-1-li').setAttribute('class', '');document.getElementById('theChampTabs-1').style.display='none';document.getElementById('theChampTabs-2-li').setAttribute('class', '');document.getElementById('theChampTabs-2').style.display='none';" class="theChampSelectedTab">Default Comments (2)</li>    <li id="theChampTabs-1-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-1').style.display='block';theChampInitiateFB();document.getElementById('theChampTabs-0-li').setAttribute('class', '');document.getElementById('theChampTabs-0').style.display='none';document.getElementById('theChampTabs-2-li').setAttribute('class', '');document.getElementById('theChampTabs-2').style.display='none';">Facebook Comments (<fb:comments-count href="http://unhabited.planet.ee/peretoetused/" fb-xfbml-state="rendered" class=" fb_comments_count_zero"><span class="fb_comments_count">0</span></fb:comments-count>)</li>    <li id="theChampTabs-2-li" onclick="this.setAttribute('class', 'theChampSelectedTab');document.getElementById('theChampTabs-2').style.display='block';document.getElementById('theChampTabs-0-li').setAttribute('class', '');document.getElementById('theChampTabs-0').style.display='none';document.getElementById('theChampTabs-1-li').setAttribute('class', '');document.getElementById('theChampTabs-1').style.display='none';">G+ Comments</li></ul><!-- patch to avoid error --><span id="theChampTabs-0"></span><span id="theChampTabs-1"></span><span id="theChampTabs-2"></span>

How to align list Items with font-awesome icon next line text?

You can try to use font awesome's built-in solution for lists:

Use fa-ul and fa-li to easily replace default bullets in unordered lists.

font awesome's built-in solution for lists

In your case, the code will change to something like this:

<ul class="fa-ul">
  <li><i class="fa fa-square"></i><span>Name and surnaf       


       Related Topics
          
              Equal Height of Elements Inside Grid Item with CSS Grid Layout
 What Is This CSS Selector? [Class*="Span"]
 How to Make This Header/Content/Footer Layout Using CSS
 Background Color of Tabs in Shiny Tabpanel
 Css: Bolding Some Text Without Changing Its Container's Size
 Sass @Each with Multiple Variables
 How to Change the Text Color of First Select Option
 Styling Twitter Bootstrap Buttons
 Sass CSS: Target Parent Class from Child
 CSS Overlapping Arrow
 Css3 Fade Effect
 Bootstrap 3 Slide in Menu/Navbar on Mobile
 Changing Chunk Background Color in Rmarkdown
 How to Create the Masonry Effects with Just Bootstrap 3 Grid System and CSS
 Differencebetween Outline and Border CSS Properties
 Css: Width and Max-Width
 Combining :Not() Selectors in CSS
 Absolute Positioning Ignoring Padding of Parent
          
dddddds sdgfh dh hdfh df hdsh dfh dsfh sdfhdsfh sdf hsdfhdsfhme</li>
</ul>