How to add font-awesome icon before ul li using css

Custom li list-style with font-awesome icon
Custom li list-style with font-awesome icon
Custom li list-style with font-awesome icon

Hello Friends today in this article we will learn how to add font font-awesome icon before ul li element. To Change li bullet icon first we have to add font-awesome css library file in our head section.

To Add font-awesome Icon to Unordered List we use CSS ::before Pseudo Element. and we can add icon before li by using ::before Pseudo Element and we can add icon after li by using ::after Pseudo Element.

First Of all just add font-awesome CSS library file to your page head section.

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

 <ul class="list">
     <li>India</li>
     <li>Australia</li>
     <li>America</li>
     <li>Japan</li>
     <li>China</li>
     <li>Nepal</li>
   </ul>
<style type="text/css">
   body
   {
	   background:#f3f3f3;
   }
  .list { list-style:none;}
  .list li { position:relative; padding-left:25px; line-height:30px;}
  .list li::before 
  { 
    content: "\f185";
    position:absolute;
	font-family: FontAwesome;
	left:0;
	top:5px;
	width:20px;
	height:20px; 
	background:#000; 
	text-align:center; 
	line-height:20px; 
	color:#fff;
  }
</style>

Leave a Reply

avatar
  Subscribe  
Notify of