What is the difference between Use Font-awesome all.js and all.css?

Question

I have to use font awesome in my Web, and I found that I have 2 ways to implements Font Awesome.

I want to work with 5.0.1 version, I realized that using ALL.CSS allows me to use Font-awesome in classes with: AFTER in CSS, but beyond that I do not know what the difference is, and what each one is used for, and another question, when I should use both.

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

<script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"></script>

I hope to use the lightest font-awesome to implement

you should never use both. The only difference is that one is a Font and the other is SVG — Temani Afif, Jul 16 '19 at 11:27
and you can use pseudo element with the JS version: https://stackoverflow.com/q/48753688/8620333 — Temani Afif, Jul 16 '19 at 11:27
I use **defer "https://use.fontawesome.com/releases/v5.0.1/js/all.js** I cant use pseudo element. In version 5.01 doesnt work? — juanjinario, Jul 16 '19 at 11:45
you can, read the above link and consider using the last version .. .the 5.0 is very old, we are at 5.9 now — Temani Afif, Jul 16 '19 at 11:46

score 2 · Answer 1 · edited Dec 18 '22 at 13:07

2

all.css is the font version of FontAwesome.

When you need the SVG font, you have to use js.css version.

More detail can be found on their website

edited Dec 18 '22 at 13:07

S-Flavius

292
2
14

answered Jul 16 '19 at 11:31

Sumit Patel

4,530
1
10
28

score 2 · Answer 2 · answered Jan 23 '23 at 09:57

Choose the javaScript (.js) OR the css (.css) version, not both.

.js : Retrieves the <i> tags with class name fa and replaces them with the code from an svg image. This is a good option if you don't have a lot of Font Awesome icons on your web page.

.css : Loads the Font Awesome font family (for example v5.0.1 = 37.78 kB). This is a good option when you have a large number of icons on your web page.

What is the difference between Use Font-awesome all.js and all.css?

2 Answers2