Css change icon size

How to Use and Style Icons with Pure CSS: An Ultimate Guide

To use icons for your website, you need to follow the steps below:

Set up on your site

Copy the code provided by Font Awesome website into the of each template or page where you want to use Font Awesome icons.

Here, we will use the 5.8.1 version link rel to define the relationship between the current document and the linked file:

8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Add icons to your UI

The code of the icon will look like this:

Style Your Icons

One can easily change the size and the color of an icon, even add shadows to it by using just CSS. It is also possible to have moved and animated icons. We will cover these all below.

How to Use Font Awesome Icons

Icons can be placed nearly anywhere using a style prefix (fa) and the name of the icon. Font Awesome is used with inline elements, and it is recommended that you stick to them in a project with a consistent HTML element.

To reference an icon you need to use its name, prefixed with fa- and your preferred style corresponding prefix ( fas, fal, far or fab ).

Using an element to reference the icon will be like this:

Or use a span element to reference the icon such as the code below:

The fa prefix has been deprecated in version 5. The new default prefix is the fas for solid style, the fab style for brands, far for regular style and fal for light style.

Example of adding Font Awesome icons:

html> html> head> title>Font Awesome Icons title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> head> body> h2>Icons example h2> p>Camera p> i class="fas fa-camera"> i> p>Car p> i class="fas fa-car"> i> p>Envelope p> i class="fas fa-envelope"> i> body> html>

How to Size Font Awesome Icons and Give Colors to Them

Icons inherit the font size of their parent container to match any text that you may use with them. You can increase or decrease the size of icons relative to the inherited font size with classes such as fa-xs , fa-sm , fa-lg , fa-2x , etc.

As for the color, it can be set using the CSS color property. You just need to set your icons in a element and define the color for it in your style or just give a style to your element.

Example of styling Font Awesome icons:

html> html> head> title>Font Awesome Icons title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> div < color: #1c87c9; > style> head> body> h2>Icons example with specified size and color h2> div> i class="fas fa-camera fa-xs"> i> i class="fas fa-camera fa-sm"> i> i class="fas fa-camera fa-lg"> i> i class="fas fa-camera fa-2x"> i> i class="fas fa-camera fa-3x"> i> i class="fas fa-camera fa-5x"> i> i class="fas fa-camera fa-7x"> i> i class="fas fa-camera fa-10x"> i> div> body> html>

Here find the sizing scale details:

Class	Size
fa-xs	.75em
fa-sm	.875em
fa-lg	1.33em
fa-2x	2em
fa-3x	3em
fa-4x	4em
fa-5x	5em
fa-6x	6em
fa-7x	7em
fa-8x	8em
fa-9x	9em
fa-10x	10em

It is also possible to directly style the size of an icon by setting the font-size in the icon’s external style or directly in the style attribute of the HTML element referencing the icon.

Example of setting the size of Font Awesome icons:

html> html> head> title>Font Awesome Icons title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #8ebf42; > .star < font-size: 2em; > style> head> body> h2>Icons example with font-size and color h2> div> p>Default size icon. p> i class="fas fa-star"> i> p>Font-size: 2em; p> i class="fas fa-star star"> i> div> body> html>

How to Use Icons with Buttons

You can also add these icons while creating buttons. Just insert the icon in the element.

Example of adding buttons with icons:

html> html> head> title>Buttons with icons title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> button < border: none; border-radius: 5px; color: #ffffff; padding: 10px 14px; font-size: 16px; cursor: pointer; > button:hover < background-color: #666666; box-shadow: 2px 4px #999999; > .btn < background-color: #999999; > .home < background-color: #ff6347; > .menu < background-color: #008080; > .about < background-color: #e6b800; > style> head> body> h2>Buttons with icons h2> p>Icon buttons: p> button class="btn"> i class="fa fa-home"> i> button> button class="btn"> i class="fa fa-bars"> i> button> button class="btn"> i class="fas fa-info-circle"> i> button> p>Icon buttons with text and different colors: p> button class="home"> i class="fa fa-home"> i> Home button> button class="menu"> i class="fa fa-bars"> i> Menu button> button class="about"> i class="fas fa-info-circle"> i> About button> body> html>

How to Add Shadow Effects to Icons

For having shadow effects on icons, the CSS text-shadow property is necessary.

Define the shadow for the element to which the icon is referenced like this:

Example of adding shadow effects on icons:

html> html> head> title>Font Awesome Icons title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Icons with text shadow example h2> div> i class="fas fa-apple-alt"> i> i class="fas fa-car"> i> i class="fas fa-star-half-alt"> i> i class="far fa-smile"> i> i class="fas fa-paw"> i> i class="fas fa-globe-asia"> i> div> body> html>

How to Use Font Awesome Icons in a List

With icons, it is possible to do awesome things! You can style your HTML lists with icons as decorative bullets.

Example of using Font Awesome icons in a list:

html> html> head> title>Font Awesome Icons title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> span < color: #8ebf42; > style> head> body> h2>Icons in a list example h2> ul class="fa-ul"> li> span class="fa-li"> i class="fas fa-check-double"> i> span>List item 1 li> li> span class="fa-li"> i class="fas fa-check-circle"> i> span>List item 2 li> li> span class="fa-li"> i class="fas fa-check-square"> i> span>List item 3 li> li> span class="fa-li"> i class="fas fa-tasks"> i> span>List item 4 li> ul> body> html>

How to Animate Font Awesome Icons

Make the icons spin and pulse by using the fa-spin class to get an icon to rotate, and the fa-pulse class to have it rotate with 8 steps. Works especially well with fa-spinner .

Try the example below to see the difference between the fa-spin and the fa-pulse classes.

Example of animating Font Awesome icons:

html> html> head> title>Font Awesome Icons title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Icons with the fa-spin and fa-pulse classes h2> p>Spinner spin: p> i class="fas fa-spinner fa-spin"> i> p>Spinner pulse: p> i class="fas fa-spinner fa-pulse"> i> body> html>

See another example with several animated icons.

Example of animating various icons:

html> html> head> title>Font Awesome Icons title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Icons with animation h2> i class="fas fa-spinner fa-pulse"> i> i class="fas fa-star fa-spin"> i> i class="fas fa-sync fa-spin"> i> i class="fas fa-haykal fa-spin"> i> i class="fas fa-stroopwafel fa-pulse"> i> i class="fas fa-car fa-spin"> i> body> html>

How to Rotate Font Awesome Icons

It is often needed to rotate, flip, or mirror an icon for a great design, that’s why some quick utilities are included to help with that.

For arbitrarily rotating and flipping icons, use the fa-rotate-* and fa-flip-* classes when you reference an icon.

Example of rotating Font Awesome icons:

html> html> head> title>Font Awesome Icons title> link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous"> style> i < color: #1c87c9; text-shadow: 2px 2px 4px #00ffff; font-size: 30px; > style> head> body> h2>Icons with rotation h2> i class="fas fa-star-half-alt"> i> i class="fas fa-star-half-alt fa-rotate-90"> i> i class="fas fa-star-half-alt fa-rotate-180"> i> i class="fas fa-star-half-alt fa-rotate-270"> i> i class="fas fa-star-half-alt fa-flip-horizontal"> i> i class="fas fa-star-half-alt fa-flip-vertical"> i> i class="fas fa-star-half-alt fa-flip-both"> i> body> html>

Here find the rotation amount details:

Class	Rotation Amount
fa-rotate-90	90°
fa-rotate-180	180°
fa-rotate-270	270°
fa-flip-horizontal	Mirrors icon horizontally.
fa-flip-vertical	Mirrors icon vertically.
fa-flip-both	Mirrors icon vertically and horizontally (requires 5.7.0 or greater versions).

Источник

Sizing Icons

We have a number of options for sizing icons in your project. So much so, even Goldilocks would be happy.

Remove ads with a Pro plan!

A subscription to a Pro-level plan will remove all third-party advertisements on fontawesome.com.

And of course Pro-level plans come with…

Get Font Awesome Pro for only $99/yr

We’ll cover the basics of industry standard sizing recommendations, and how you can size icons up when it’s useful, or when text alignment is not a concern.

Before You Get Started

By default, icons inherit the font-size of their parent container which allow them to match any text you might use with them. In addition to that, Font Awesome comes with the following sizing tools.

Font Awesome includes a range of t-shirt based sizes that not only increase or decrease an icon’s size, but also help vertically align an icon with surrounding text and elements (e.g. button padding). This is great for increasing/decreasing an icon’s size while maintaining legibility and alignment alongside UI elements.

 p>i class="fa-solid fa-coffee fa-2xs">i> When my six o’clock alarm buzzes, I require a pot of good java.p> p>i class="fa-solid fa-coffee fa-xs">i> When my six o’clock alarm buzzes, I require a pot of good java.p> p>i class="fa-solid fa-coffee fa-sm">i> When my six o’clock alarm buzzes, I require a pot of good java.p> p>i class="fa-solid fa-coffee">i> When my six o’clock alarm buzzes, I require a pot of good java.p> p>i class="fa-solid fa-coffee fa-lg">i> When my six o’clock alarm buzzes, I require a pot of good java.p> p>i class="fa-solid fa-coffee fa-xl">i> When my six o’clock alarm buzzes, I require a pot of good java.p> p>i class="fa-solid fa-coffee fa-2xl">i> When my six o’clock alarm buzzes, I require a pot of good java.p> 

Like Font Awesome’s icons, the relative sizing scale is created with modern browsers’ default 16px font-size in mind and creates steps up/down from there.

Relative Sizing Class	Font Size	Equivalent in Pixels
fa-2xs	0.625em	10px
fa-xs	0.75em	12px
fa-sm	0.875em	14px
fa-lg	1.25em	20px
fa-xl	1.5em	24px
fa-2xl	2em	32px

Sizing on the Smaller Side

Font Awesome’s icons are designed to render crisply at the equivalent of 16px . While we provide utilities to decrease their size, it’s industry and our best practice to avoid rendering important UI symbols at very small sizes as they are tougher to read and understand.

Источник