after linking to font Awesome link works well if i use @font_face but if not it shows a weird link. i cannot seem to understand the problem

Question

i am trying to add an icon from font_awesome i followed the manual and took the link tag to the libary from https://cdnjs.com/ i have some old code defining specific certain icons using @font_face , which in turn defines the font-family:'FontAwesome'. i am using my class :: before and the doc tag /"doc_tag" in content property when i use font-family: FontAwesome (which are some old icons which i defines and in case has the one enter image description here i need for now) it works but when i use font-family: "Font Awesome 6 Free" , as instructed in the manual it does not work enter image description here i saw tutorials which did the same and it worked for them (without using @font_face)

• i followed the instruction
• i checked that the libarary link tag is valid

what am i doing wrong?

i defined my library link :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="assets/css/main.css">

and my relevant class (to which the before will apply to her content) :

<p class="last-paragraph">real time embedded engineer </p>

and at my css file :

.last-paragraph::before {
    /*  font-family: "font awesome 6 free";*/
    font-weight: 500;
    content: "\f08c"; /*f08c*/
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    /*  text-transform: none !important;*/
    -webkit-font-smoothing: antialiased;
    font-family: FontAwesome;
/*  font-family: "Font Awesome 6 Free";*/
}

with --font-family: FontAwesome-- it works well and with --font-family: "Font Awesome 6 Free"-- it does not.

i will appreciate the help