Question

我无法将字体图标添加到我的列表项目中，我使用简单的脚本来做到这一点，不知道它出错的地方

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>

Answer 1

如果我们能用简单的CSS3实现这个目的，为什么要使用jQuery / JavaScript？

试试这个：

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

Answer 2

我使用你自己的代码制作这个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

你的代码添加i标记，我想你忘了包含jQuery库

Answer 3

＆＃13;

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

＆＃13;

ul
{
    list-style-type: none;
}

＆＃13;

<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>

＆＃13;

使用这是完全相同的工作。

无法将字体图标添加到我的列表元素

3 个答案: