راهکار استفاده از فونت آیکون های Font Awsome در pseudo elements

با سلام

تو روش گفته شده یک نکته فراموش شده است و اون اینکه فقط برای ایکون های regular می باشد و نمی توان آیکون های fas, fab و .. استفاده کرد اگر توی سایت font awesome نگاه کنیم می بینید که برای بعضی از حالت های که گفتم Unicode یکسان وجود دارد. اگر می خواهید از Unicode استفاده کنید فکر کنم روش زیر بهتر باشد که کلاس fa در خود المان نوشت شود و بعد از سودو کلاس before یا after استفاده کنیم. 

کد HTML:

<i class="far"></i>
<i class="fas"></i>
<i class="fab"></i>

کد CSS:

i.far::before {content: "Unicode"}
i.fas::before {content: "Unicode"}
i.fab::before {content: "Unicode"}

بله، روشی که شما لطف کردید به اشتراک گذاشتید تعداد خطوط کمتری از استایل رو هم نیاز داره.
خدمت دوستانی که نمیدونن fab, far و fas چی هستن هم عرض میکنم که در این لینک cheatsheet فونت آیکون های رایگان fontawesome وجود داره، واردش که میشید اون بالا سه tab با نام های regular، brands و solid میبینید و لیست فونت آیکون های موجود به همراه unicode اونها. 
fa مختصر عبارت font awesome و حرف آخر نشون دهنده ی دسته ی brands، regular یا solid هست.

یک نکته رو میخوام تکمیل و اصلاح کنم،

 اونم اینکه خب گاهی پیش میاد که ما میخوایم از این فونت آیکن ها در after و before صرفا استفاده کنیم و ساختار کد های html رو دست نزنیم بهش (حالا به هر دلیلی)
اینجا دیگه راهکار دوستمون بی فایدس.

اما در رابطه با آیکن هایی که چند حالت دارن، مثل regular و solid، چیزی که مشخص میکنه کدوم یکی از این دسته فونت ها در سند ما نمایش داده بشه مقدار font-weight هست. مقادیر این پراپرتی رو بین 400 و 900 تغییر بدید تا اون آیکن مد نظرتون نمایان بشه.

اکثرا برای regular (ینی آیکن هایی که توو پر نیستن) این مقدار برابر با 400 هست
برای solid (آیکن هایی که توو پر هستند) این مقدار برابر با 900 هست.
برای brands هم فک میکنم همون 400 هست اما unicode یکسان با regular نداره و تداخلی ایجاد نمیشه.

html :

<p class="paragraph">
	lorem ipsum blah blah
</p>

css :

.paragraph::after{
	font-family: "Font Awsome 5 Free";
	content:"\[unicode]";
	font-weight: 900;
	/* 
	or this 
	font-weight: 400; 
	*/
}

در واقع بدون font-weight اصلا فونت آیکن ما نمایان نخواهد شد و این یه مقدار الزامیست.

یه نکته ی پایانی هم بگم :)))
برای استفاده از آیکن برند ها مثل اینستاگرام
باید مقدار font-family رو مساوی با ‘Font Awsome 5 Brands’ قرار بدید