2016-08-04 5 views
1

Я использую это в моем CSS:шрифта Высокие иконок в CSS - Большие размеры

#ribbon h2:before { 
    content: '\f145'; 
    font-family: 'FontAwesome'; 
    color: #FFF; 
} 

Я хотел значок, чтобы быть больше, используя то, что здесь: http://fontawesome.io/examples/

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

Но я не могут понять, как смешивать эти коды, поэтому я могу сделать значок больше, так как один использует числа, а один использует текстовый код. Как должен выглядеть мой CSS, если я хочу использовать fa-2x, например?

Спасибо!

+0

спасибо. Я использовал код ниже, но я действительно спрашивал, как использовать «fa fa-ticket fa-lg», например, в CSS, а не в «\ f145»; Или как я могу добавить эффекты, такие как вращение или что-то еще. Какой-то простой способ перевести все варианты здесь http://fontawesome.io/examples/ в стили CSS - не жесткий код HTML. – filmproposals

ответ

1

Я не совсем уверен, что вы имеете в виду, но вы можете увеличить размеры значков, увеличив font-size.
Вы также можете создавать свои собственные классы с различными размерами шрифтов и назначать их для изменения размеров значков.

Пример:

HTML:

<i class="fa fa-ticket fa-6x"></i> 

CSS:

.fa-6x 
{ 
    font-size: 6em; /* x6 larger icon */ 
} 


Надеюсь, что это помогает.

+0

Спасибо. Я использовал ваш код для увеличения размера. Отлично. , но я действительно спрашивал, как использовать «fa fa-ticket fa-lg», например, в CSS, а не в «\ f145»; Или как я могу добавить эффекты, такие как вращение или что-то еще. Какой-то простой способ перевести все варианты здесь http://fontawesome.io/examples/ в стили CSS - не жесткий код HTML. – filmproposals

+0

Я не думаю, что это возможно с Font Awesome. Если это так важно для вас, и вы можете использовать другой шрифт для его достижения, я предлагаю вам ознакомиться с [шрифтом значка Google] (https://design.google.com/icons/). – Surfine