html - 试图用 img 替换 fa awesome 图标

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);
    }   
}

如您所见，我正在尝试用 css 中定义的名为 fa-vibe 的 img 替换 fa awesome 图标。它似乎不起作用，但它的位置什么也没有显示，有人可以帮忙吗。

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