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

...以及该部分的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;
}

试图用img替换fa awesome图标

1 个答案: