Наложение шрифта Удивительный значок над бутстрапом thumbnail

У меня возникли проблемы с выяснением того, как наложить значок шрифта Awesome поверх миниатюрного изображения Bootstrap и правильно его масштабировать.Наложение шрифта Удивительный значок над бутстрапом thumbnail

Это пример того, как мои миниатюры Bootstrap структурированы, как без значка Font Awesome.

<div class="row"> 
     <div class="col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/demoreel.png"> 
      </div> 
     </div> 

     <div class="col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/soma.png"> 
      </div> 

     </div> 

     <div class="col-md-4"> 
      <div class="thumbnail"> 
       <img src="images/chomsky.png"> 
      </div> 
     </div> 

    </div>

источник

2014-09-09 user3225440

как этот вопрос относится к шрифту Awesome? Где ваши коды FA? Чего вы пытаетесь достичь? – Devin

Я не включил ни один из кодов шрифтов Awesome, потому что я не знал, где их поставить. Некоторые люди, казалось, помещали их в div, который был братом этого изображения. Другие вложили их в тег A с изображением (если вы собираетесь использовать гиперссылку с изображением в любом случае). Я закончил тем, что перешел к более позднему методу, и я нашел его после того, как перебрал много исходного кода для примера веб-сайта, на который я смотрел. – user3225440

я выложил изображение с шрифтом удивительным иконе используя CSS для таргетинга элементов и обеспечения абсолютной абсолютной позиции (позволяя им обрезать изображение). Затем я сконцентрировал шрифт на значке по центру изображения сверху: 50% и слева: 50%. Наконец, я сделал тонкую настройку, чтобы получить ее в идеальном положении, регулируя их поля.

.thumbnail i { 
top: 50%; 
left: 50%; 
position: absolute; 
margin-left: -25px; 
margin-top: -30px; 
}

Это работает очень хорошо для центрирования над изображением, как она по-прежнему остается в центре, даже если изображение масштабов от повторного размера окна браузера. Однако я не могу заставить его держаться на углу изображения и оставаться там даже после того, как его расширили.

источник

2014-09-11 01:33:22 user3225440

Похоже, есть некоторые классы доступны, что «увеличение иконки размеров относительно их контейнера»:

<i class="fa fa-camera-retro fa-lg"></i> fa-lg 
<i class="fa fa-camera-retro fa-2x"></i> fa-2x 
<i class="fa fa-camera-retro fa-3x"></i> fa-3x 
<i class="fa fa-camera-retro fa-4x"></i> fa-4x 
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

Больше deets: http://fortawesome.github.io/Font-Awesome/examples/#larger

источник

2014-09-10 00:00:51 skybondsor

Почему downvote? – skybondsor

Наложение шрифта Удивительный значок над бутстрапом thumbnail

ответ

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