درود

یکی از روشهای آیکون دهی اینه که از content در استایل استفاده بشه. در این حالت شما میتونید مستقیم کاراکتر و یا کد اسکی شو به content بدید:

.foo::after {
    content: '❤';
}
/* or another example */
.foo::after {
    content: '\\A9'; /* '©' */
}

حالا مزیت این روش چیه؟ این که مثلا شما میخواید وقتی رو یه دکمه ای کلیک کردید و یا هاور کردید آیکونش عوض بشه. این کار یا باید با جاوا اسکریپت مدیریت بشه، یا به راحتی با استفاده از سلکتورها و همین روش انجام میشه.

با استفاده از before و after هم میتونید مدیریت کنید که آیکون قبل یا بعد کلاس مشخص شده قرار بگیره.

متاسفانه متوجه سوالم نشدید لطف کنید ویدیو رو از دقیقه 21:09 ببنید تا 31:42

ویدیو رو دیدم ?

استاد هم اول درمورد ساختار یونیکد توضیح میدن و بعد همین مطالب رو در قالب مثال نشون میدن و در نهایت میفرمایند که در جلسات بعدی با این خاصیت سروکار داریم و مثال ازش زیاد میبینیم.

من هم ازتون خواستم که با مثال روش اضافه کردن یونیکد رو توضیح بدید که در مثال اول تون از یونیکد استفاده نکردید و هنوز مشکل من برطرف نشده

سلام،

در مثال خانم کریمی مقدم از کاراکترهای یونیکد استفاده شده است که با استفاده از content در css به سند html اضافه میشود حالا با after به بعد از عنصر foo و با before به قبلش. نمونه ای از لیست کاراکترهای یونیکد در این لینک آمده است.

مثال دیگری میارم:

<i class="heart">Before text< /i>
<div class="after-heart">After text< /div>

کدهای css:

i.heart::before {
    content: "\\2665";
}
div.after-heart::after {
    content: "\\2665";
}

نمایش دمو

نکته: تگ i در اصل برای متن‌ هایی که باید به صورت مورب نمایش داده شوند استفاده می‌ شد، اما با اومدن کتابخانه‌ هایی مانند Font Awesome، این تگ برای نمایش آیکون‌‌ها استفاده می‌ شود.

ممنون از مثالی که زدید اما زمانی که استاد توضیح میدادند یکبار از تگ i استفاده کردند وبار دیگر بدون تگ i و زمانی که من بدون تگ i استفاده میکنم اون ایکن برام نمایش داده نمیشه علت این اجرا نشدن چی هستش

خیر مشکلی نداره. تفاوتی نمیکنه چه تگی استفاده کنید.

شاید لود نشده باشه.

این لینکو ببینید.

کدتون رو روی codepen سیو کنید لینکشو بذارید اینجا.

این لینک کدپن هستش

https://codepen.io/mahshid73/pen/PoXYpPP