试图用 img 替换 fa awesome icon答案

【问题标题】：trying to replace fa awesome icon with img试图用 img 替换 fa awesome icon
【发布时间】：2016-06-01 03:21:11
【问题描述】：

用于此的 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 替换一个很棒的图标。它似乎不起作用，但它的位置没有显示任何内容，有人可以帮忙。

【问题讨论】：

这不是 CSS 代码。我认为这是 LESS，但我不完全确定。

标签： html css fonts font-awesome

【解决方案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;
}

【讨论】：

它得到了它，但它剪辑了大部分它似乎没有正确居中，如果我改变像素宽度和高度它会消失吗？
我已经编辑了答案。这应该使图像居中，并使其适合 i 元素，无论 with 和 height 是什么。
是的，它做到了，它并没有像其他字体真棒图标那样放大位置，但我想这可能是另一回事
尝试改变 display:block;显示：inline-block;