2017-02-20 12 views
4

У меня есть шрифт Удивительные значки, установленные на сайте this. Размер значков не увеличивается даже после добавления класса для увеличения размера.Шрифт Удивительный размер значка не увеличивается

<ul class="stay-connected-inner list-inline"> 
    <li><a href="#"><i class="fa fa-twitter fa-3" aria-hidden="true"></i></a></li> 
    <li><a href="#"><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></a></li> 
    <li><a href="#"><i class="fa fa-medium fa-3" aria-hidden="true"></i></a></li> 
    <li><a href="#"><i class="fa fa-linkedin fa-3" aria-hidden="true"></i></a></li> 
</ul> 
+0

что "класс, чтобы увеличить размер"? фа-3? fa-3 не объявляется. – Roy

+0

Да. fa-3 - это класс для увеличения размера значка. –

+1

изменить 'fa-3' до'fa-3x' –

ответ

11

Чтобы увеличить размеры иконок по отношению к их емкости, использовать фа-LG (33% увеличение), FA-2x, 3x-фа, фа-4x, или FA-5x классы.

  <ul class="stay-connected-inner list-inline"> 
       <li><a href="#"><i class="fa fa-twitter fa-3x" aria-hidden="true"></i></a></li> 
       <li><a href="#"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li> 
       <li><a href="#"><i class="fa fa-medium fa-3x" aria-hidden="true"></i></a></li> 
       <li><a href="#"><i class="fa fa-linkedin fa-3x" aria-hidden="true"></i></a></li> 
      </ul> 
+1

Спасибо. Это сработало. Принятие ответа после завершения интервала ожидания. –

2

font-awesome icons - это тексты. Поэтому используйте font-size, чтобы увеличить размер шрифта - удивительные значки.

Для например.,

i { 
    font-size: 18px; 
} 
0

использовать следующий инлайн CSS

<style type="text/css"> 
    .fa-3{ 
     font-size: 30px; 
    } 
</style> 
0

шрифтов удивительной иконку клеящей пожалуйста, проверьте эту ссылку. http://fontawesome.io/examples/

Чтобы увеличить размеры значков относительно их контейнера, используйте классы fa-lg (33%), fa-2x, fa-3x, fa-4x или fa-5x.

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

У меня была та же проблема. По какой-то причине класс fa переопределяет класс fa-2x в удивительной библиотеке шрифтов. Я нашел блог, что они знали, что это проблема еще в 2014 году, но еще не обратились к ней. На моем сайте я снова добавил класс стиля и добавил! Важно, что устранило мою проблему.

<style> 
 
     .fa-2x{ 
 
     font-size:2em !important; 
 
    }; 
 
</style>