trying to replace fa awesome icon with img

Question

HTML for this....

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

... and the css for the section...

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

So as you can see I am trying to replace a fa awesome icon with a img called fa-vibe defined in the css. It doesn't seem to work though just shows nothing in its place can someone please help.

Answer 1

Set it as background-image:

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