Html font family icons

How to Use font awesome icons as CSS content code

Using Pseudo-elements we can add content to the web page with just CSS.

Font awesome uses ::before pseudo-element to add icons to the page using their CSS content codes.

Table of Contents

Display font awesome icons using CSS Content Code & ::before pseudo-element

To use font awesome icons as CSS content code follow the below steps.

Step 1: Load the font awesome CSS file.

Add the font awesome CSS file in the tag of the page

I am using latest font awesome icon version 6.2.0.

Step 2: Define the CSS class names for the icons

We need to add unique class name to the icon element.

Go through the 2016 free font awesome icons, to get the CSS content code.

For all icons, unicode values are already defined.

 /* Brand icon*/ .twitter::before < content: '\f099'; >/* Regular Icon */ .user::before < content: '\f007'; >/* Solid Icon */ .cloud::before

No icon will be displayed, because we need to add the font family.

Step 4: Set the icon font style

For each style of icons i.e., regular, solid and brand icons we have to set the appropriate font style.

In font awesome 6, there are predefined CSS custom properties.

We can use them to set the font style.

 /* Brand icon*/ .twitter::before < content: '\f099'; font: var(--fa-font-brands); >/* Regular Icon */ .user::before < content: '\f007'; font: var(--fa-font-regular); >/* Solid Icon */ .cloud::before

The above CSS custom properties adds the font-family and font-weight properties to the icon.

/* Brand icon*/ .twitter::before < content: '\f099'; font-family: "Font Awesome 6 brands"; font-weight: 400; >/* Regular Icon */ .user::before < content: '\f007'; font-family: "Font Awesome 6 free"; font-weight: 400; >/* Solid Icon */ .cloud::before

CSS custom property	font-family	font-weight
—fa-font-brands	Font Awesome 6 brands	400
—fa-font-solid	Font Awesome 6 free	900
—fa-font-regular	Font Awesome 6 free	400

And if you are using font awesome 5 version icons, use the following font-family and font-weight css styles.

There are no custom css properties defined in font awesome 5 version.

Icon Style	font-family	font-weight
brands	Font Awesome 5 brands	400
solid	Font Awesome 5 free	900
regular	Font Awesome 5 free	400

Step 5: Add common styles to the icons

The above code displays the icons in default style.

If you want to add some custom styles to the icon add a common class to the icons.

Then add necessary styles, I am changing the color of icons to the red colour.

Why to use font awesome CSS content Code & ::before ?

The general practice is to display font awesome icons using their css class names & icon style class.

If you are starting a new project then it’s fine.

When font awesome icons project started people are using other existing icons.

Think about an existing project where icons are displayed using other class names.

The class name is different than font awesome icon i.e., fa-twitter .

Changing all icon class names in a project is difficult.

So font awesome used ::before pseudo-element to display icons using CSS content codes.

This way we can simple change the CSS styles for the icon elements no changes required in HTML pages.

I gave content as \f099 which is unicode value for twitter icon defined by font awesome icons.

Font awesome css content not working

If you follow the above steps, font awesome css content code should be working fine.

Otherwise you might see an empty square icon.

Remember two things while display font awesome icons using their CSS content code

As explained above if you are using font awesome 6 version icons use custom CSS properties .

And for the font awesome 5 version icons use font-family & font-weight .

/* Brand icon*/ .twitter::before < content: '\f099'; font-family: "Font Awesome 5 brands"; font-weight: 400; >/* Regular Icon */ .user::before < content: '\f007'; font-family: "Font Awesome 5 free"; font-weight: 400; >/* Solid Icon */ .cloud::before

If you are using pro icons you need to add font-family as “Font Awesome 5 Pro” or “Font Awesome 6 Pro”

font awesome CSS content code StackBlitz Demo

Here is the StackBlitz demo for font awesome CSS content code.

Источник

CSS Pseudo-elements

When changing the HTML on your project is not an option, we can leverage a feature of CSS to add icons to a page. CSS has a powerful feature known as Pseudo-elements (opens new window) . Font Awesome has leveraged the ::before pseudo-element to add icons to a page since the very beginning.

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

Heads up! We changed the unicode values of some of the icons!

In version 5.12.0 we began to use unicode codepoints that fell outside of the defined Private Use Area (PUA). We’ve corrected this in Version 5.14.0. If you are using icons that were released in 5.12 or 5.13, you’ll want to update your unicode values.

Working with pseudo-elements is not for the faint of heart nor front-end development!

Referencing icons using pseudo- elements is more complicated and prone to errors than the standard way of dropping an element into your HTML. This option works best for folks who can’t control the final markup of their project.

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.

 style> .icon::before  display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; > .login::before  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; > .tps::before  font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea"; > .twitter::before  font-family: "Font Awesome 5 Brands"; content: "\f099"; > style> ul style="margin: 0;"> li>span class="icon login">span> Loginli> li>span class="icon tps">span> TPS Reportsli> li>span class="icon twitter">span> Twitterli> ul> 

How to Define 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

Define Common CSS for All Icons

Firstly, there are some common CSS properties that apply to all icons. It’s best to get this out of the way first in your CSS so that your icon definitions become simple.

Reference Individual Icons

There are four important parts to include when referencing any individual icon:

 /* Step 1: Common Properties: All required to make icons render reliably */ .icon::before  display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; > /* Step 2: Reference Individual Icons */ .login::before  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; > /* Note: Make sure to include the correct weight and Unicode value for the icon */ .tps::before  font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea"; > 

Need a more hands-on example of how to do this? Here’s a Codepen demo showing how to render icons of all styles

(opens new window) via CSS Pseudo-elements with our Web Fonts-based Framework.

Using CSS Pseudo-elements with Duotone Icons

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.

Define Common CSS for Duotone Icons

There are shared CSS properties, which are 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 so that your icon definitions become simple.

1. Add styling to element that will contain the pseudo-element to support positioning.
2. Set the font-family to Font Awesome 5 Duotone , the font-weight to 900 , and add positioning styles for the pseudo-element.
3. Set the default opacity levels and colors for each layer of the duotone icon.

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.

 /* Step 1: Common Duotone 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-family and font-weight for this style */ .icon-duotone::before, .icon-duotone::after  font-family: "Font Awesome 5 Duotone"; font-weight: 900; /* 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); > /* Step 4: Reference Individual Icon's Layers */ .icon-login::before  content: "\f007"; > .icon-login::after  content: "\10f007"; > 

Using CSS Pseudo-elements with Our SVG + JS Framework

If you’re using our SVG + JS framework to render icons, you need to do a few extra things:

Using CSS Pseudo-elements to render icons is disabled by default when using our SVG + JS Framework. You’ll need to add the attribute to the element that calls Font Awesome.

Set Pseudo-elements’ display to none

Since our JS will find each icon reference (using your pseudo-element styling) and insert an icon into your page’s DOM automatically, we’ll need to hide the real CSS-created pseudo-element that’s rendered.

 html> head> script data-search-pseudo-elements defer src="/your-path-to-fontawesome/js/all.js"> script> style> .icon::before  display: none; > .login::before  font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f007"; > .tps::before  font-family: "Font Awesome 5 Free"; font-weight: 400; content: "\f1ea"; > style> head> body> ul style="margin: 0;"> li>span class="icon login">span> Loginli> li>span class="icon tps">span> TPS Reportsli> ul> body> html> 

We know this can be tough to get. Here’s a Codepen demo showing how to render icons

(opens new window) via CSS Pseudo-elements with our SVG + JS Framework.

Using CSS Pseudo-elements with Uploaded Icons

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

You can add your uploaded icons to your designs using pseudo-elements, but you’ll need to take a couple of different steps.

Go to the Uploaded Icons page of your kit, open up the details of the icon you want to use, and copy the unicode value.

Reference the Unicode and Kit Font Family

Set the font to font-family: «Font Awesome Kit» and use that unicode in your CSS along with the regular settings for using Font Awesome pseudo-elements, like this:

 /* Step 1: Common Properties: All required to make icons render reliably */ .icon::before  display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; > /* Step 2: Reference Individual Icons */ .custom-icon::before  font-family: "Font Awesome Kit"; content: "\e001"; /* change to your icon's unicode value */ /* font-weight isn't needed */ > 

Support for Dynamic Changes

Let’s get a little cute with it by using some JavaScript and jQuery to toggle the class of an element.

 script> setInterval(function ()  $('.ninety-four').toggleClass('arrow') >, 1000) script> style> .ninety-four::after  margin-left: 0.25em; font-size: 2em; vertical-align: middle; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0c8"; > .ninety-four.arrow::after  content: "\f152"; > style> a class="ninety-four" href="https://en.wikipedia.org/wiki/Blink_element">Hey, do you remember the blink tag?a> 

Upgrading a Project Using Pseudo-elements and Version 4

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

If you’ve used Pseudo-elements and Version 4 in a project and are looking to upgrade, we strongly recommend using a kit to host and serve Font Awesome 5.

We’ve added a Version 4 Compatibility feature for use right out of the box, err, kit. This feature will help map your Version 4 Unicode references to the proper Version 5 ones. If you have CSS that hard codes Version 4’s font-family name, this auto-update will make sure all of those cases use the current version of Font Awesome from your kit.

Go Make Something Awesome

Font Awesome is the internet’s icon library and toolkit used by millions of designers, developers, and content creators.

Источник