2013-09-08 2 views
7

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

Вот мой HTML

<div class="span5 bookBuild"> 
<div class="well well-small"> 
    <h4>Build your Book!</h4> 
    <div class="span2"> 
     <i class="icon-file icon-large"></i> 
    </div><!--span2--> 
    <div class="span9"> 
     <p>This is a paragraph</p> 
    </div><!--span9--> 
    <p class="clearfix"></p> 
    </div><!--well--> 
</div><!--span5--> 

и я пытался добавить, как вы можете увидеть icon-large класс, а также icon-2x класса. Ни один из icon-2x - icon-4x не работает.

Я также попытался ориентации на конкретный значок, а затем увеличить размер шрифта, такие как font-size: 3em;

Любая помощь будет удивительно!

+1

Вы можете поделиться скрипкой? – andrew

+0

@andrew Я бы хотел, но я не могу заставить bootstrap работать внутри скрипки. Даже те, кого я искал, не работают. – zazvorniki

+0

Вы можете попробовать bootply.com, чтобы обеспечить скрипку. вы можете легко вставлять там шрифт. – Ravimallya

ответ

2

Использовать icon-4x вместо icon-large. См. Здесь: http://bootply.com/79841

+0

Я уже пробовал это. Я просто установил значок-2x вместо 4x. Ни одна из них не работает. – zazvorniki

+0

работает с ним немного, это фактически заставляет мои иконки полностью исчезать. – zazvorniki

+0

@zazvorniki делает http://bootply.com/79841 дисплей ok в вашем браузере? –

13

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

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

http://fortawesome.github.io/Font-Awesome/examples/

+1

Если вы посмотрите на вопрос, я уже пробовал это ... – zazvorniki

+1

u r используя значок-2x, 3x, 4x .... Я предлагаю использовать fa-lg, fa-2x. используйте fa, а не значок. во-вторых, только немного иконки мы можем сделать больше. Не все. – Shariq

+0

Это более старая версия шрифта awesome, эти классы еще не существовали ... Я использовал классы, которые действительно существовали. – zazvorniki

2

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

.fa-big{ 
    font-size: 100px; 
} 


<i class="fa fa-ship fa-big"></i> 
+0

Обратите внимание, что этот вопрос не использует bootstrap 3 или последний шрифт.Это было спрошено два года назад, и в то время я пытался добавить классы, которые были доступны «icon-large», как указано выше. – zazvorniki

+0

Возможно, этот ответ поможет кому-то еще, кто не знает, что вы можете настроить шрифты-удивительные значки с размером шрифта css. Я был очень счастлив, когда узнал об этом. :) – cmac

7

Это работало для меня в загрузчике только после того, как я добавил !important, как это:

.fa-big{font-size: 100px !important;} 
+1

Я только что понял причину, по которой я должен был добавить! Важным было то, что я связывал свои стили.css перед файлом bootstrap css. Как только я его отменил, мои стили css имели приоритет над bootstrap css (я несколько новичок в программировании в HTML, поэтому я все еще изучаю все это). – Mike2145