2016-02-19 2 views
0

HTML для этого ....пытается заменить фа удивительный значок с IMG

<!-- 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 awesome icon с img, называемым fa-vibe, определенным в css. Кажется, он не работает, хотя просто ничего не показывает на своем месте, кто-то может помочь.

+0

Это не код CSS. Я думаю, что это МЕНЬШЕ, но я не совсем уверен. –

+0

правильный, мой плохой – havingagoatit

ответ

4

Установите его в качестве фонового изображения:

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

у него есть это, но он клипы большинство из них, кажется, не центрируется должным образом, если я изменяю ширину и высоту пикселя, это исчезает? – havingagoatit

+0

Я отредактировал ответ. Это должно центрировать изображение и сделать его пригодным внутри i-элемента, независимо от того, что такое «с» и «высота». – rblarsen

+0

yup, который сделал это, он не приближается к позиции, как другие шрифты, удивительные значки, но я думаю, что это другое дело, возможно, – havingagoatit

Смежные вопросы