CODEWITHSUNDEEP
html
Nag
Nag

Reputation: 956

not able to prepend font icon to my list elements

I am not able to prepend font icon to my list items,i have used simple script to do that,don't know where it went wrong

html:

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

<script>
 $( document ).ready(function() {
     $( ".our_vision_page_content ul li" ).prepend( "<i class='fa fa-circle'> </i>" );
 });
</script>
</head>

   <body>
   <div class="our_vision_page_content">
       <ul>
        <li>We are providing zero % interest loan facility, along with RO schemes to purchase Ro purifier systems.</li>
        <li>Price at affordable rates with no compromise on quality. Cost is spared from advertisement.</li>
        <li>From the last year, We are installing our products in each houses in villages through demonstration and educating villages peoples regarding safe drinking water.</li>
        <li>Any RO company in the country cannot install RO systems in houses of villages. Because in village houses there will be no facilities for water tap and over head tank in these houses.</li>
     </ul>
   </body>
  </html>

Upvotes: 2

Views: 52

Answers (3)

Parth Chavda
Parth Chavda

Reputation: 1829

 $( document ).ready(function() {
     $( ".our_vision_page_content ul li" ).prepend( "<i class='fa fa-circle'> </i>" );
 });
ul
{
    list-style-type: none;
}
<html>
<head>        
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
</script>

</head>

   <body>
   <div class="our_vision_page_content">
       <ul>
        <li>We are providing zero % interest loan facility, along with RO schemes to purchase Ro purifier systems.</li>
        <li>Price at affordable rates with no compromise on quality. Cost is spared from advertisement.</li>
        <li>From the last year, We are installing our products in each houses in villages through demonstration and educating villages peoples regarding safe drinking water.</li>
        <li>Any RO company in the country cannot install RO systems in houses of villages. Because in village houses there will be no facilities for water tap and over head tank in these houses.</li>
     </ul>
	 </div>
   </body>
  </html>

Use this is complately work.

Upvotes: 0

kevpoccs
kevpoccs

Reputation: 635

I use your own code to make this JSFiddle : 

   <div class="our_vision_page_content">
       <ul>
        <li>We are providing zero % interest loan facility, along with RO schemes to purchase Ro purifier systems.</li>
        <li>Price at affordable rates with no compromise on quality. Cost is spared from advertisement.</li>
        <li>From the last year, We are installing our products in each houses in villages through demonstration and educating villages peoples regarding safe drinking water.</li>
        <li>Any RO company in the country cannot install RO systems in houses of villages. Because in village houses there will be no facilities for water tap and over head tank in these houses.</li>
        </ul></div>

https://jsfiddle.net/azhqdf83/2

your code add the i tag, i think you forgot to include the jQuery library

Upvotes: 1

Zeshan Munir
Zeshan Munir

Reputation: 1188

Why use jQuery/JavaScript if we can achieve this with simple CSS3?

Try this:

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

Upvotes: 1

Related Questions