試圖取代與IMG

Question

HTML這個發真棒圖標....

<!-- Services --> 
<section id="services" class="row color" data-scroll-factor="0.7"> 
    <div class="col-md-10 col-md-offset-1"> 
    <div class="icon"><i class="fa fa-desktop"></i></div> 
    <h1>Services</h1> 
    <div class="section-content"> 
     <p>Vibe Music Therapy provides music therapy interventions to a wide range of healthcare settings.<br>There are also a range or corporate CPD based training events that Vibe also get involved with.<br>Click on one of the relevent icons below to find about how we provide music therapy to the people we work with.</p> 
     <div class="row"> 
     <div class="col-md-4 service"> 
      <div class="icon service-icon animate-zoom"><i class="fa fa-vibe"></i></div> 
      <h3></h3> 
      <p></p> 
     </div> 
     <div class="col-md-4 service"> 
      <div class="icon service-icon animate-zoom"><i class="fa fa-briefcase"></i></div> 
      <h3></h3> 
      <p><br></p> 
     </div> 
     <div class="col-md-4 service"> 
      <div class="icon service-icon animate-zoom"><i class="fa fa-users"></i></div> 
      <h3></h3> 
      <p></p> 
     </div> 
     </div> 
    </div> 
    </div><!-- End of .col-md-10 --> 
</section><!-- End of Services --> 

...併爲部分的CSS ...

// Section: Services 
&#services { 
    .service { 
     h3 { 
      font-weight: @titleTextFontWeight; 
      text-transform: uppercase; 
      letter-spacing: 1px; 
      font-size: 18px; 
     } 

     p { 
      font-size: 14px; 
     } 
    } 

    i.fa-vibe { 
     content:url(\http://your-website/link-to-image.png); 
    } 
} 

所以你可以看到我我試圖用一個名爲fa-vibe的img替換一個fa真棒圖標。它似乎沒有工作，雖然只是沒有顯示任何東西，請別人幫忙。

Answer 1

它設置爲背景圖片：

i.fa-vibe { 
    content:""; 
    background-image:url('http://your-website/link-to-image.png'); 

    width: 100px; //WIDTH of the icon 
    height: 100px; //HEIGHT of the icon 
    display: inline-block; 
    background-position:center; 
    background-size:cover; 
}