Awesome fonts css content

How to add Font Awesome icons in your web pages using CSS

In an earlier article, I wrote about how to install Font Awesome on your website, and how to show its icons on your web pages.

In it, I explained that to show icons, you have to use HTML or elements. All you have to do is load Font Awesome on your pages, then add its classes to either of these elements.

There also exists another method which you can alternatively use CSS to add icons instead of the above-mentioned HTML elements.

To show Font Awesome icons on your pages with CSS, all you have to do is use ::before or ::after CSS pseudo-elements on an HTML element with the content property having Font Awesome icon Unicode as its value.

Don’t worry or get confused. I will break down everything for you below in a more clear and easy-to-understand approach and with aid of multiple examples.

I will be a bit more descriptive in explaining some concepts such as the CSS pseudo-elements and the Unicode character encoding. So feel free to use the table of contents above to jump straight to the answer if you are already conversant with these concepts.

What are Pseudo-elements in CSS?

A pseudo-element is a keyword added to a CSS selector that lets you style a specific part of the selected element(s).

• Adding styling to the first letter or line of an element.
• Add some content before or after the content of an element.
• Change text selection highlight color, and much more.

Syntax

The syntax for using pseudo-elements is very similar to the normal CSS usage where we use selectors such as h1 , p , a , #anything , etc, to select the element to which we want to add styling.

The only thing different this time is that we follow up the CSS selector with a double colon :: and the pseudo-element, ie. ::pseudo-element

We have a total of 6 CSS pseudo-elements as shown in the table below:

Note: In CSS3, pseudo-elements use double colon notation as opposed to pseudo-classes which use single-colon notation.
CSS2 and CSS1 used single-colon notation for both pseudo-classes and pseudo-elements.

CSS ‘content’ property

content is a CSS property used with ::before or ::after pseudo-elements to add content to an HTML element.

 /* Example 2 Adding a unicode character after links and giving that content some styling */ a::after < content: "\f101"; font-size: 16px; color: #444; >/* Example 3 Adding a smiley gif image after H1 element(s) */ h1::before < content: url(smiley.gif); >/* Example 4 Adding some text at the end of paragraph(s) */ p::after

There are different ways of adding value to the content property depending on the kind of content you want to give it. The quotation method » » as used above in examples 1 and 2 is sufficient for us so we won’t cover the rest here.

Understanding Unicodes

Unicode is a universal character encoding standard that defines the way individual characters are represented in text files, web pages, and other types of documents.

These characters include alphabets, numbers, mathematical notations, popular symbols, and characters from all languages. Each character is assigned a unique code that only identifies to it.

Unicode was designed to support characters from all languages around the world. It was developed in 1991 to overcome the limitations of ASCII encoding (which was designed to represent only basic English characters).

This encoding supports more than 1,000,000 characters.

There are different types of Unicode encodings, with UTF-8 being the standard and default character encoding for web and software programs. UTF-8 supports up to four bytes per character(using between one and four bytes to represent a character depending on the type of that character).

Characters in Unicode use unique numbers between U+0000 and U+10FFFF. The table below shows a list of a few examples of characters and their unicodes:

By convention, the Unicode hexadecimal number should be six characters long. Typically, to shorten it, leading zeros can be omitted as they’re optional. For example, we used U+0975 for ॵ in the above table. It can still be written as U+000975 or U+975 without changing the character.

Visit unicode-table.com/en to view a wide list of all the Unicodes.

Using Unicodes with CSS

To add a character on a web page using its Unicode in CSS, simply remove the U+ part and use the remaining part as the value for the CSS content property by escaping it with a backslash \ .

Remember that the content property is only used with the ::before and ::after CSS pseudo-elements so we have to attach these characters either before or after another HTML element.

 /* Example 2 Adding Α after link(s) */ a::after

Font Awesome icons Unicodes

In a similar way to other types of characters, Font Awesome being an icon font has a unique unicode for each of its icons.

Examples

How to get Font Awesome Unicodes

Head to Font Awesome website, search for your preferred icon, and then click on it to open it.

In Font Awesome version 6, it opens as a modal within the same page and you can easily spot the unicode next to the small icon on the right side.

In version 5, it opens on a new page and you can easily spot the unicode next to the small icon on the left side.

On clicking on the unicode, it gets copied to the clipboard and you can paste it into your code.

Examples of Font Awesome usage with Unicodes in CSS

You add Font Awesome icons unicodes using CSS in a similar way to the other unicodes as covered above.

However, you will need to include the font-family property for it to work.

For Font Awesome version 4 and earlier, use FontAwesome as the property value.

For version 5, in addition to font-family, you will also be required to specify the font-weight. The table below summarizes the font-family values and font-weight values for the different styles of icons.

For version 6, use the font-family and font-weight values as in the table below:

Adding FA icons with CSS

Conclusion

In this article, we have covered what unicodes are, what CSS pseudo-elements are, and how to add Font Awesome icons in web pages using CSS pseudo-elements and icons unicodes.

It’s my hope you have enjoyed and learned. That’s all for now.

You May Also Like:

Источник

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.

Источник

How to Use Font Awesome Icon as Content in CSS

Today, icon fonts are quite common, and more and more developers are taking advantage of them in their designs. Icon fonts are simple fonts that contain symbols and glyphs instead of letters or numbers. They can be styled with CSS in the same way as ordinary text.

In this snippet, we’ll show how font awesome icon can be used as content.

Create HTML

html> html> head> title>Title of the document title> head> body> a href="#">Here is a link a> body> html>

Add CSS

• Set the font-family and font-size properties for the element.
• Set the text-decoration and color properties for the element.
• Add the :before pseudo-element to place the font.
• Set the font-family to «Font Awesome 5 Free».
• Specify the value («\f00c») of the content property.
• Set the font-weight to «900».

body < font-family: Arial; font-size: 15px; > a < text-decoration: none; color: #000000; > a:before < font-family: "Font Awesome 5 Free"; content: "\f00c"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; >

Here is the result of our code.

Example of adding font awesome icon as a content:

html> html> head> title>Title of the document title> link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css"> style> body < font-family: Arial; font-size: 15px; > a < text-decoration: none; color: #000000; > a:before < font-family: "Font Awesome 5 Free"; content: "\f00c"; display: inline-block; padding-right: 3px; vertical-align: middle; font-weight: 900; > style> head> body> a href="#">Here is a link a> body> html>

In the example above, we replaced the content value with the corresponding unicode number. Note that there are common CSS properties that apply to all icons.

Let’s see one more example, where we used two icons inside a tag.

Example of adding font awesome icons as a content in an unordered list:

html> html> head> title>Title of the document title> link rel="stylesheet" type="text/css" href="//use.fontawesome.com/releases/v5.7.2/css/all.css"> style> ul li < list-style-type: none; display: inline-block; margin-right: 20px; > .icon::before < display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; > .facebook::before < font-family: "Font Awesome 5 Brands"; font-weight: 900; content: "\f082"; > .twitter::before < font-family: "Font Awesome 5 Brands"; content: "\f099"; > style> head> body> ul> li> span class="icon facebook"> span> Facebook li> li> span class="icon twitter"> span> Twitter li> ul> body> html>

Change the font-family to Font Awesome 5 Free or Font Awesome 5 Brands depending on the type of icon you want to render.

Источник