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

جامعه‌ها وبلاگ شروع یادگیری برنامه نویسی

با توجه به مشکلی که استاد و دوستان در استفاده از فونت آیکون‌های Font Awsome با استفاده از unicode‌ها داشتن سری به وب سایت Font awsomme قسمت Docs زدم.
شیوه ی استفاده به این صورت توضیح داده شده :

html :

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

css:

.paragraph::after{
	font-family: "Font Awsome 5 Free";
	content:"\[unicode]";
}

به این شیوه و با ذکر font family با مقدار ذکر شده در بالا مشکل مرتفع میشود.

لینک داکیومنت

با سلام

تو روش گفته شده یک نکته فراموش شده است و اون اینکه فقط برای ایکون‌های 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 هست.

Mahdi Mohaqeq ۲۲ تیر ۱۴۰۰، ۲۱:۵۵

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

اونم اینکه خب گاهی پیش میاد که ما میخوایم از این فونت آیکن‌ها در 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 اصلا فونت آیکن ما نمایان نخواهد شد و این یه مقدار الزامیست.

Mahdi Mohaqeq ۱۲ شهریور ۱۴۰۰، ۱۱:۲۵

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

Mahdi Mohaqeq ۱۶ شهریور ۱۴۰۰، ۱۵:۵۵