چگونه از icon ها در CSS استفاده کنیم؟ نحوه متحرک سازی آیکون ها در CSS ؟ چگونه می‌توانیم از آیکون ها در منو ها استفاده کنیم.
بهترین راه برای استفاده از آیکون های مختلف تو وب سایتمون، بهره گیری از کتابخونه هایی هست که برای این منظور طراحی شدن.
سرفصل‌های پست
انواع کتابخونه آیکون ها
ما تو مسیر آموزشیمون، با دو نوع کتابخونه مختلف روبرو می‌شیم که به ترتیب کاربردشون، عبارتند از:
- کتاب خونه آیکون های fontawesome
- کتاب خونه آیکون های google icons
همونطور که تو این ترتیب مشاهده میکنیم، کاربرد کتاب خونه fontawesome از کتاب خونه google icons بیشتر هست. پس بیشتر مقاله رو صرف یادگیری کتاب خونه fontawesome میکنیم.
نحوه استفاده از google icons کم و بیش شبیه به fontawesome هست و با یادگیری fontawesome اون رو هم به خوبی یاد می‌گیرین.
کتاب خونه آیکون fontawesome
همونطور که یکم پیش مطالعه کردیم، کتاب خونه fontawesome معروف ترین و پر کاربرد ترین کتاب خونه ای هست که میتونیم با کمک اون، آیکون های جذاب رو به صفحه وب سایتمون اضافه کنیم.
استفاده از این کتاب خونه آسون تر از آب خوردنه!
نحوه نصب و فراخونی کتاب خونه fontawesome
چندین روش برای فراخونی و استفاده از این کتاب خونه وجود داره.
استفاده از kit code در fontawesome
بهترین روش، استفاده از kit code یا کدی هست که خود وب سایت fontawesome بهمون می‌ده.
برای استفاده از این روش، قبل از هر چیزی، به وب سایت fontawesome.com رجوع میکنیم.
تو صفحه ای که برامون باز میشه، رو گزینه Start for Free کلیک میکنیم:
حالا صفحه ای برامون باز میشه که از ما ایمیلمون رو درخواست می‌کنه. ایمیلمون رو تو قسمت مشخص شده وارد میکنیم و دکمه Send Kit Code رو می‌زنیم:
سپس به inbox ایمیلی که وارد کردیم رجوع میکنیم. اینجا برای ما لینکی فرستاده شده که توسط اون، ما تایید میکنیم که ایمیل متعلق به خودمون رو فرستادیم، و نه دیگری. رو لینک مشخص شده کلیک میکنیم و مشخصات مورد نیاز رو تو صفحه بعد وارد میکنیم. (این تیکش راحته! با خودتون 🙂 )
در مرحله آخر، بعد از ساختن حساب کاربری تو سایت، صفحه زیر برامون باز میشه که لینک شخصی خودمون رو بهمون تحویل می‌ده:
حالا کافیه لینک مورد نظر رو تو انتهای بدنه عنصر body قرار بدیم:
<body>
<!-- بقیه کد ها -->
<script src="https://kit.fontawesome.com/{ your kit code }.js" crossorigin="anonymous"></script>
</body>
کافیه جای { kit code }، کیت کدی که وب سایت fontawesome براتون ساخته رو قرار بدین.
در ادامه این آموزش طراحی سایت به یادگیری استفاده از cdn در font Awesome می‌پردازیم.
استفاده از cdn در fontawesome
cdn یا content delivery network، روشیه که میتونیم فایل ها رو به صورت ریموت داخل کدامون فراخونی کنیم، بدون اینکه نیاز به دانلود اون ها داشته باشیم.
fontawesome هم cdn خودش رو داره که میتونیم با استفاده از تگ link در بدنه تگ head اون رو فراخونی کرده و ازش استفاده کنیم:
<head> <link rel="stylesheet" href="https://mizfa.com/blog/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/font-awesome/5.15.1/css/all.min.css" crossorigin="anonymous" /> </head>
معرفی بدنه کلی و کد آیکون
فرم کلی یک آیکون در کتابخونه مذکور، به شکل زیره:
<i class="fas fa-car"></i> <!-- یا --> <span class="fas fa-car"></span>
همونطور که دیده میشه، ما میتونیم عموما از دو عنصر i و span برای نمایش این آیکون ها استفاده کنیم.
دو کلاس برای آیکون ها مورد استفاده قرار می‌گیره:
- کلاس fas
- کلاس fa-car
کلاس fas، کلاسی هست که تو تمامی آیکون ها مشترکه و باید وجود داشته باشه. این کلاس قبل از fontawesome5 به صورت fa نوشته می‌شد. اما در حال حاضر، حرف s انتهای کلاس، نشون دهنده اینه که فونت آیکون مورد نظر، از نوع solid هست.
حالا اگه بخوایم فونت آیکون ما به صورت regular ظاهر بشه می‌نویسیم:
<i class="far fa-car"></i> <!-- یا --> <span class="far fa-car"></span>
حالا به کد زیر که دو کلاس دیگه رو هم در بر داره توجه کنین:
<i class="fas fa-car"></i> <i class="fas fa-cloud"></i> <i class="fas fa-heart"></i>
نتیجه کد رو به شکل زیر مشاهده میکنیم:
کلاس های هر کدوم از آیکون ها در سایت fontawesome اومده، کافیه نام آیکون مورد نظرتون رو سرچ کنین و سپس از کلاسش استفاده کنین.
قبل از ادامه یادتون باشه توی منو های بازشونده ما آیکون نذاشتیم برای منو‌هامون، با استفاده از این آیکون ها می‌تونید آیکون برای منو ها هم قرار بدید.
کلاس های اندازه دهی
ما میتونیم توسط کلاس های اندازه دهی، مقیاس هر کدوم از آیکون ها رو تغییر بدیم.
کلاس های اندازه دهی تو fontawesome عبارتند از:
- fa-xs
- fa-sm
- fa-lg
- fa-1x
- .
- .
- .
- fa-10x
کلاس های بالا، به ترتیب از سایز آیکون کوچیک تا بزرگ چیده شدن. استفاده از اون ها، دقیقا مثل کلاس های معمولیه.
به مثال زیر توجه کنین:
<i class="fas fa-cloud fa-5x"></i> <i class="fas fa-cloud fa-4x"></i> <i class="fas fa-cloud fa-3x"></i> <i class="fas fa-cloud fa-2x"></i> <i class="fas fa-cloud fa-1x"></i> <i class="fas fa-cloud fa-lg"></i> <i class="fas fa-cloud fa-sm"></i> <i class="fas fa-cloud fa-xs"></i>
نتیجه به فرم زیر خواهد بود:
ناگفته نمونه که اندازه آیکون ها رو با کمک font-size هم میتونیم تغییر بدیم، این آیکون ها تفاوتی با حروف text معمولی ندارن.
کلاس های دوران و قرینه سازی
کلاس های دوران و قرینه سازی، کلاس هایی هستن که توسط اون ها میتونیم آیکون رو به زوایای مثلثاتی اصلی (۹۰, ۱۸۰ و ۲۷۰) بچرخونیم یا نسبت به یک محور، اون رو قرینه کنیم. این دو کلاس عبارتند از:
- fa-rotate
- fa-flip
برای درک این کلاس ها به مثال زیر توجه کنین:
<i class="fas fa-ambulance fa-rotate-90"></i> <i class="fas fa-ambulance fa-rotate-180"></i> <i class="fas fa-ambulance fa-rotate-270"></i> <i class="fas fa-ambulance fa-flip-vertical"></i> <i class="fas fa-ambulance fa-flip-horizontal"></i>
کد فوق، نتیجه زیر رو به ما می‌ده:
اگه در جایی از مقاله به سوال و یا ابهامی برخوردین، حتما در قسمت نظرات پایگاه دانش میزفا بپرسین تا من یا دیگر اعضای تیم میزفا راهنماییتون کنیم 🙂
کلاس های متحرک سازی
توسط این کلاس ها، میتونیم آیکون خودمون رو متحرک کنیم. این کلاس ها زمانی که می‌خوایم یک عنصر برای انتظار یا loading طراحی کنیم خیلی به دردمون می‌خورن!
این کلاس ها عبارتند از:
- fa-spin
- fa-pulse
برای استفاده از این ها، کافیه مثل کلاس های معمولی، به صفت کلاس آیکون مورد نظرمون، اضافشون کنیم.
تفاوت این دو کلاس رو می‌تونین تو شکل زیر به وضوح مشاهده کنین:
کلاس آیکون های تو در تو
توسط این کلاس ها، میتونیم آیکون های تو در تو بسازیم. کلاس های مورد نظر عبارتند از:
- fa-stack
- fa-stack-1x
- fa-stack-2x
برای درک چگونگی انجام این کار به کد زیر توجه کنین:
<span class="fa-stack fa-lg"> <i class="fas fa-atom fa-stack-1x"></i> <i class="fas fa-circle-notch fa-stack-2x"></i> </span>
- دو آیکونی که می‌خوایم داخل هم باشن رو داخل یک عنصر قرار می‌دیم. (این عنصر می‌تونه هر عنصری باشه)
- به عنصر پدر هر دو آیکون، کلاس fa-stack رو اضافه میکنیم.
- به آیکون داخلی کلاس fa-stack-1x و به آیکون بیرونی کلاس fa-stack-2x رو اضافه میکنیم.
نتیجه کد به شکل زیر خواهد بود:
اگه در جایی از مطالب، به ابهام و سوالی برخوردین، حتما تو قسمت نظرات مطرح کنین تا من یا دیگر اعضای تیم میزفا راهنماییتون کنیم 🙂
کلاس آیکون های تمام عرض
آیکون های ما، عرض های متفاوتی با هم دارن. عرض های متفاوت باعث می‌شن که محتوای بعد از آیکون ها، با هم در یک راستا نباشن.
برای هم عرض کردن اون ها، کافیه کلاس fa-fw رو به صفت class هر کدوم از آیکون ها اضافه کنیم.
برای درک بهتر به مثال زیر توجه کنین:
کتاب خونه آیکون google icons
این کتاب خونه، نسبت به کتاب خونه fontawesome سبک تره و ویژگی های کمتری داره.
نحوه نصب و فراخونی کتاب خونه google icons
نحوه نصب و فراخونی این کتاب خونه، حتی از تیترش هم کوتاه تره!
این کار توسط قرار دادن لینک زیر در بدنه عنصر head انجام میشه:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
معرفی بدنه کلی و کد آیکون
این آیکون ساختار کد بسیار ساده ای داره. کافیه بعد از فراخونی کتاب خونه مذکور، به عنصر i کلاس material-icon اختصاص بدین و نام آیکون مورد نظرتون رو داخل عنصر بنویسین.
به مثال زیر دقت کنین:
<i class="material-icons">accessibility</i> <i class="material-icons">cloud</i> <i class="material-icons">star</i>
شاهد نتیجه زیر خواهیم بود:
نام تمامی آیکون های این بخش، در وب سایت متریال دیزاین اومده که می‌تونین ازشون استفاده کنین.
پایان ترم
[box type=”info” class=”question-from-users” width=””]سوال:
از آیکون های fontawesome استفاده میکنیم اما هیچکدومشون نمایش داده نمیشن. دلیلش چی می‌تونه باشه؟
کد های ما:
<html>
<head>
</head>
<body>
<div>
<i class="fas fa-car"></i>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
</div>
<script type="text/javascript" src="https://mizfa.com/blog/wp-content/litespeed/localres/aHR0cHM6Ly9jZG5qcy5jbG91ZGZsYXJlLmNvbS8=ajax/libs/font-awesome/5.15.1/css/all.min.css"></script>
</body>
</html>
به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)
[/box]نتیجه گیری
به پایان این فصل از آموزش کامل CSS می‌رسیم. تو این فصل یاد گرفتیم که چطور میتونیم بدون کمترین استفاده از عکس ها و راه های عجیب و غریب، فقط با استفاده از دو کتاب خونه، آیکون های مختلف رو وارد صفحمون کنیم.
امیدوارم که بهره کافی رو از این فصل برده باشین! 🙂
اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.
مدیر محتوا: علی اسمعیلی
14 پاسخ
سلام وقتی فایل دانلود فونت اسوم را داخل پروژه ام هنگام باز کردن سایت به صورت مربع مربع نمایش داده میشود. مشکل چیه؟
سلام
یعنی فونت رو نخونده
سلام من از لینک کتابخونه اوسام استفاده میکنم توی تگ هد بعد کلاس هم توی تگ دیو میزارم اما نمیدونم چرا اجرا نمیکنه
سلام. خب اول باید کدتون رو دید و بعد در مورد حل مشکل نظر داد. احتمالا یا لینک رو به درستی فراخونی نکردین، یا نسخه فونت آسومی که استفاده می‌کنین از نسخه آیکون پایین‌تره، یا در نهایت ممکنه مشکل سینتکس داشته باشید 🙂
ایا مشه همزمان از دو. کتابخومه گوگل و اواسام استفاده کرد؟
سلام. بله چرا نشه.
کافیه cdn هر دو کتابخونه رو در بدنه تگ head قرار بدین و ازشون استفاده کنین.
سلام ممنون از آموزش خوبتون خیلی بدردم خورد 🙂
ولی یه سوال متحرک سازی فقط میشه چرخش انجام داد؟
یعنی اگه بخوام بالا و پایین بشه باید چیکار کنم ؟ اصلا میشه ؟
ممنون 🙂
سلام محمد مهدی، خواهش میکنیم.
اره چرخش رو با کلاس های مختص خود آیکون میشه انجام داد. ولی تا جایی که من اطلاع دارم، fontawesome کلاسی برای انتقال آیکون ها معرفی نکرده.
اما تو این کار رو میتونی خیلی ساده و شیک با کمک ترکیبی از مباحث ترنسفرم در CSS، ترنزیشن در CSS و انیمیشن در CSS انجام بدی.
سلام
ممنون از آموزشای خوبتون
میخواستم بپرسم که استفاده از این آیکون ها باعث کاهش سرعت لود شدن سایت نمیشه ؟
و اینکه برای گوگل آیکون ها نمیتونیم حالت هایی که برای awesomeicons استفاده کردیم رو استفاده کنیم ؟
سلام اميرحسين. نه تاثير چنداني تو سرعت لود سايت ندارن چرا كه بر خلاف عكس ها، اينا از جنس نوشتار و text هستن.
و براي گوگل آيكون ها هم، اگه منظورت همون كلاس هاييه كه به آيكون انيميشن يا اندازه مختلف ميدادن، نه نميشه استفاده كرد. فقط مختص به فونت آسوم هستن 😃
چون لینک کتابخانه رو وارد نکرده ایم انتهای body
src=”https://kit.fontawesome.com/{ your kit code }.js” crossorigin=”anonymous”
دقیقا همینطوره مهدی، ممنون ازت
سلام انتهای قسمت روش kitcode به نظر اشتباه نوشتید
اون کد اسکریپت باید توی قسمت head باشه نه body!
سلام محمد. لینک دهی های تگ script رو هم میتونیم تو head انجام بدیم و هم انتهای body. اما در کل توصیه شده که این کار تو انتهای body صورت بگیره. دلیلش هم اینه که ممکنه یک سری از کد های javascript قبل از لود شدن کامل عناصر HTML داخل تگ body، اجرا بشن که خودش منجر به ارور میشه.