I have a general knowledge gap when it comes to how the content of this CDN works. The following is the link to the CDN I'm referring to Font Awesome 6.3. I grabbed the text inside the said CDN and measured its size of it which amounts to 99.65kb. Given the extensive library that font awesome is, it seems unlikely that all the icons can be contained in that small size. Looking through the code i can see that icons have very little code to them only referring to content.
.fa-calendar-days:before{content:"\f073"}
What i don't understand is how do you actually retrieve the icon from this CSS. For example if i wrote <i class="fas fas-calendar-days/> inside my HTML, does that initiate another server request to Font Awesome to retrieve that icon with content:"\f073"?
If you scroll all the way to the bottom of the page, you'll see part of the CSS that goes:
@font-face{font-family:"FontAwesome";font-display:block;src:url(../webfonts/fa-v4compatibility.woff2) format("woff2"),url(../webfonts/fa-v4compatibility.ttf) format("truetype");
Basically, Font Awesome uses a special "font" (hence the first part of its name) where unicodes are actually icons, so \f073 in that font refers to a specially defined something that renders from the given font. What the icons actually look like is defined as part of that font file.