Font awsome file download file icon

fa-file-download icon in font awesome icons has 1 variant fas i.e.,solid.

fa-file-download icon Usage

To display fa-file-download icon add predefined class name i.e.,fa-file-download (with prefix fa-) to the ‘i’ tag.

Here ‘i’ tag represents icon.

And we need to add corresponding category for fa-file-download icon. i.e., fas.

fa-file-download

Change fa-file-download icon size

To increase fa-file-download font awesome icon size, use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes along with icon class fa-file-download.

Increase in icon size will be relative to their parent container.

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

fa-file-download Icon with Fixed Width

All the font awesome icons does not have same width.

For example fa-file-download icon and fa-home may not have same height and width.

So to display two icons with fixed width and height we can use fa-fw class.

Fixed WidthNormal
Fixed WidthNormal

fa-file-download Icon Border

To add border to fa-file-download icon, use fa-border class.

Pull fa-file-download icon To the left

To pull icon fa-file-download to the left of the container use fa-pull-left class.\n

Pull fa-file-download icon To the right

To pull icon fa-file-download to the right of the container use fa-pull-right class.

These two classes can used to add single quotes or double quotes to the text.

Animate fa-file-download icon using fa-spin

To animate font awesome fa-file-download icon, use fa-spin class.

Animate fa-file-download icon with steps

While animating the font awesome icon,We can rotate fa-file-download icon in 8 steps instead of uniform rotation.

To animate font awesome fa-file-download icon with 8 step rotation, use fa-pulse icon along with fa-spin class.

Rotate fa-file-download Icon using fa-rotate-x

To rotate the font awesome icon fa-file-download, Use fa-rotate-x class

Where ‘x’ represents degree of rotation.

Flip fa-file-download Icon using fa-flip-*

To flip fa-file-download font awesome icon horizontally and vertically use fa-flip-horizontal and fa-flip-vertical classes.

F Normal
F fa-flip-horizontal
F fa-flip-vertical

Combine fa-file-download icon with other font awesome icons

In font awesome icons,using stacking we can combine multiple icons and display it as one icon

To do that use the fa-stack class on the parent, the fa-stack-1x for the regularly sized icon, and fa-stack-2x for the larger icon.

And use class fa-inverse for an alternative icon color. In the below example, I am displaying fa-file-download on top of icons like fa-square,fa-circle and fa-ban.

And used fa-inverse in the second example to invert the color of the icon.