You can place Font Awesome icons just about anywhere, and we've tried to make it so that icons will take on the characteristics and blend in with surrounding text naturally.
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons
We’ll cover the basics of how to add icons to your project, shorthand class names for different icons styles, how to add icons to HTML, using icons aliases, and more!
We designed Font Awesome for use with inline elements, and we recommend that you stick with a consistent element in your project. We recommend using <i> element with the Font Awesome CSS classes for the style class for the style of icon you want to use and the icon name class with the fa- prefix for the icon you want to use. Accessibility-minded folks may want to opt for the <span> element instead of <i>.
Here's an example:
<!-- This example uses <i> element with:
1. the `fa-solid` style class for solid style
2. the `user` icon with the `fa-` prefix --><iclass="fa-solid fa-user"></i><!-- Or you can use a <span> element, with classes applied in the same way --><spanclass="fa-solid fa-user"></span>
Stay on target with those CSS rules!
When using our SVG framework, remember that DOM elements with Font Awesome classes are replaced with injected <svg> elements by default. Be sure that your CSS rules target the right element.
Aliases
We've updated many of our icon names in Version 6 to make them more universal and consistent. But we wanted to make sure not to break your existing code, so we made aliases for renamed icons to allow them to work with either the old or new names.
And you can use the old or new name for styles as well. So you can still use fas, far, fal, fad, fab, and have fat be the new Thin!
<!-- All of these code snippets will render the same icon thanks to aliases. --><iclass="fa-solid fa-cutlery"></i><iclass="fa-solid fa-utensils"></i><iclass="fas fa-utensils"></i>
Advertisement
Remove ads with a Pro plan!
Using this requires Font Awesome Pro
Pro
A subscription to a Pro-level plan will remove all third-party advertisments on fontawesome.com.
And of course Pro-level plans come with…
All 16,083 Icons in Font Awesome
Solid, Regular, Light, Thin, and Duotone Styles for Each Icon + Brands
A Perpetual License to Use Pro
Services and Tools to Make Easy Work of Using Icons