Font awesome icons css content

How To Add Icons

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.

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 how to add icons to your project, shorthand class names for different icon styles, how to add icons to HTML, using icons aliases, and more!

Before You Get Started

To add an icon, you need to know a few bits of information:

1. The shorthand class name for the style you want to use
2. The icon name, prefixed with fa- (meaning «Font Awesome» naturally!)
3. The shorthand class name for the family you want to use Optional

There are three families of Font Awesome icons — each with a unique look, class name, and @font-face font-family. In both Font Awesome Classic and Sharp, there are five styles of Font Awesome icons. Here are some examples:

Style	Availability	Style class	font-weight	Looks like
Solid	Free Plan	fa-solid	900
Regular	Pro only	fa-regular	400
Light	Pro only	fa-light	300
Thin	Pro only	fa-thin	100
Duotone	Pro only	fa-duotone	900

Style	Availability	Style class	font-weight	Looks like
Solid	Pro only	fa-sharp fa-solid	900
Regular	Pro only	fa-sharp fa-regular	400
Light	Pro only	fa-sharp fa-light	300
Thin	Coming Soon!
Duotone	Coming Soon!

Font Awesome Classic is Our Default Family

If you don’t specify a family class name, our styling toolkit will render icons in Font Awesome Classic, the original look and feel that’s always in style. But if you need to reference the Classic family, you can just add the fa-classic in your icon’s HTML class names. If you want to change any or all icons to use Sharp, just add fa-sharp in the same manner!

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 designed Font Awesome for use with inline elements, and we recommend that you stick with a consistent element in your project. We recommend using 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 element instead of .

 element with: 1. the `fa-solid` style class for solid style 2. the `user` icon with the `fa-` prefix --> i class="fa-solid fa-user">i>  element, with classes applied in the same way --> span class="fa-solid fa-user">span> 

Setting Different Families + Styles

And here’s an example that references different styles and families of icons:

 i class="fa-solid fa-user">i> i class="fa-regular fa-user">i> i class="fa-light fa-user">i> i class="fa-thin fa-user">i> i class="fa-duotone fa-user">i> i class="fa-brands fa-font-awesome">i> i class="fa-sharp fa-solid fa-user">i> i class="fa-sharp fa-regular fa-user">i> 

Font Awesome Sharp requires Pro and specific versions!

Make sure you have an active Pro-level plan or a Pro license with access to the specific versions that include Sharp’s styles.

Stay on target with those CSS rules!

When using our SVG framework, remember that DOM elements with Font Awesome classes are replaced with injected elements by default. Be sure that your CSS rules target the right element.

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’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 , and fab . And we’ve also included older prefix versions for our new Thin style ( fat ) and new Sharp family of styles (Sharp Solid is fass while Sharp Regular is fasr ).

 i class="fa-solid fa-cutlery">i> i class="fa-solid fa-utensils">i> i class="fas fa-utensils">i> i class="fa-sharp fa-solid fa-times">i> i class="fa-sharp fa-solid fa-close">i> i class="fass fa-xmark">i> 

Alternate Ways to Add Icons

Источник

CSS Pseudo-elements

When changing the HTML on your project is not an option, you can make use of a CSS feature to add icons to a page when using Font Awesome Web Fonts.

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

Working with Pseudo-elements is Not for the Faint of fa-heart.

Referencing icons using pseudo-elements is more complicated and prone to errors than the standard way of dropping an element into your HTML.

Make sure you have a firm understanding of CSS and are willing to learn about some of the underpinnings that make Font Awesome work.

CSS has a powerful feature known as Pseudo-elements

(opens new window) that lets you visually add content to the page with just CSS. Font Awesome has leveraged the ::before pseudo-element to add icons to a page since Font Awesome was just a youngin.

We’ve already learned that Font Awesome uses classes like fa and fa-user to show icons in your site. Let’s duplicate the functionality of these classes and write our own using CSS pseudo-elements.

Add an Icon Using CSS Pseudo-elements

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

1. Define Common CSS for All Icons

First, you’ll need to add some common CSS properties that apply to all icons. It’s best to get this out of the way first to simplify your individual icon CSS. You can make it a separate rule or include the styling in every individual icon rule (in the next step).

 /* Step 1: Common Properties These styles are required to make icons render reliably */ .icon::before  display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; > 

2. Reference Individual Icons

There are a few important items to include when referencing any individual icon:

• Set the pseudo-element to match either the ::before or ::after you used in the previous common set up step.
• Set the font CSS property to the correct CSS custom property (see family table below). But note that Duotones need special treatment.
• Set the content to the Unicode value of one of our icons.

 /* Step 1: Common Properties: All required to make icons render reliably - we did this above but it's included here for the full demo */ .icon::before  display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; > /* Step 2: Reference Individual Icons */ /* Note: Make sure to include the correct weight and Unicode value for the icon */ /* an example rule targeting any element with the "account" class to render fa-user icon in the Solid style */ .account::before  font: var(--fa-font-solid); content: "\f007"; > /* an example rule targeting any element with the "warning" class to render fa-triangle-exclamation icon in the Regular style */ .warning::before  font: var(--fa-font-regular); content: "\f071"; > /* an example rule targeting any element with the "updates" class to render fa-newspaper icon in the Light style */ .updates::before  font: var(--fa-font-light); content: "\f1ea"; > /* an example rule targeting any element with the "contact" class to render fa-message icon in the Thin style */ .updates::before  font: var(--fa-font-thin); content: "\f27a"; > /* an example rule targeting any element with the "delete" class to render fa-trash icon in the Sharp Solid style */ .delete::before  font: var(--fa-font-sharp-solid); content: "\f1f8"; > /* an example rule targeting any element with the "add" class to render fa-circle-plus icon in the Sharp Regular style */ .add::before  font: var(--fa-font-sharp-regular); content: "\f055"; > /* an example rule targeting any element with the "gaming" class to render fa-discord Brand icon */ .gaming::before  font: var(--fa-font-brands); content: "\f392"; > /* an example rule targeting any element with the "custom-icon" class to render a custom icon (uploaded to a kit) */ .custom-icon::before  font-family: "Font Awesome Kit"; /* note that you need to use "font-family" for custom icons */ content: "\[CUSTOM_ICON_UNICODE]"; /* replace with custom icon's unicode value */ > 

Here’s a handy chart of the font styles/weights you can use:

Style	Availability	@font-face font-family	@font-face weight	CSS Custom Property
Brands	Free Plan	Font Awesome 6 Free or Font Awesome 6 Pro for Pro users	400	—fa-font-brands
Solid	Free Plan	Font Awesome 6 Free or Font Awesome 6 Pro for Pro users	900	—fa-font-solid
Regular	Pro only	Font Awesome 6 Pro	400	—fa-font-regular
Light	Pro only	Font Awesome 6 Pro	300	—fa-font-light
Thin	Pro only	Font Awesome 6 Pro	100	—fa-font-thin
Sharp Solid	Pro only	Font Awesome 6 Sharp	900	—fa-font-sharp-solid
Sharp Regular	Pro only	Font Awesome 6 Sharp	400	—fa-font-sharp-regular
Sharp Light	Pro only	Font Awesome 6 Sharp	300	—fa-font-sharp-light
Custom Icons	Pro Kits only	Font Awesome Kit	—	—

Duotone is a special case which we’ve covered below in CSS Pseudo-elements and Duotone.

See CSS Pseudo-elements in Action!

Need a more hands-on example of how to do this? Here’s a Codepen demo

(opens new window) showing how to render icons of all styles via CSS Pseudo-elements with our Web Fonts-based Framework.

CSS Pseudo-elements and Duotone

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

Using CSS pseudo-elements to render duotone icons follows a similar setup, but requires the use of both the ::before and ::after pseudo-elements along with more styling setup.

1. Define Common CSS for Duotone Icons

There are shared CSS properties unique to the Duotone style that all duotone icons will need. Again, it’s best to get this out of the way first in your CSS to simplify your icon definitions.

1. Add styling to elements that will contain the pseudo-element to support positioning.
2. Set the font to the CSS Custom Property, add the necessary font-style resets, and add positioning styles for the pseudo-element.
3. Set the default opacity levels and colors for each layer of the duotone icon.

 /* Step 1: Common Duotone positioning properties: All required to make icons render reliably */ .icon-duotone  position: relative; padding-left: 1.25em; /* make space for the width of the absolutely positioned icon */ > /* Step 2: Set the font styles for Duotone */ .icon-duotone::before, .icon-duotone::after  font: var(--fa-font-duotone); /* include the basic Font Awesome font style settings if you haven't already */ display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased; /* position both layers of the icon to the left, set our fixed-width width, horizontally center layers, and then vertically align them so they flex with different line heights */ position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1.25em; text-align: center; > /* Step 3: Set the default opacity levels and colors for each layer */ .icon-duotone::before  color: var(--fa-primary-color, inherit); opacity: 1; opacity: var(--fa-primary-opacity, 1.0); > .icon-duotone::after  color: var(--fa-secondary-color, inherit); opacity: var(--fa-secondary-opacity, 0.4); > 

2. Reference Individual Icon’s Layers

Referencing individual duotone icons works much like all CSS pseudo-element icon use. Set the content to the unicode value of one of our icons. For Duotone icons, you will have two values — one for each duotone layer. For door-open , you would have \f52b for the primary layer and \f52b\f52b for the secondary layer.

 /* Step 4: Reference an individual icon's layers using unicodes */ /* This rule renders the primary duotone for the door-open icon */ .icon-login::before  content: "\f52b"; > /* This rule renders the secondary duotone for the door-open icon */ .icon-login::after  content: "\f52b\f52b"; > 

Pseudo-elements and Sass (SCSS)

Источник