CODEWITHSUNDEEP
cssfontawesome-4.4.0
filmproposals
filmproposals

Reputation: 21

Font Awesome Icons in CSS - Larger Sizes

I am using this in my CSS: 

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

I'd like the icon to be larger using what's here: 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

But I cannot figure out how to mix these codes so I can make the icon larger since one uses numbers and one uses text code. What should my CSS look like if I want to use fa-2x for example?

Thank you!

Upvotes: 1

Views: 2758

Answers (1)

Surfine
Surfine

Reputation: 94

I'm not exactly sure what you mean but you can increase the icon sizes by increasing the font-size.
You can also create your own classes with various font sizes and assign them to change the icon sizes.

Example:

HTML:

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

CSS:

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


Hope this helps.

Upvotes: 1

Related Questions