جلسه ۶۵ – آیکون ها در CSS

آشنایی با آیکون ها و ساخت آیکون متحرک در CSS

آشنایی با آیکون ها
آشنایی با آیکون ها

چگونه از 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 کلیک می‌کنیم:

صفحه اول وب سایت fontawesome

حالا صفحه ای برامون باز می‌شه که از ما ایمیلمون رو درخواست می‌کنه. ایمیلمون رو تو قسمت مشخص شده وارد می‌کنیم و دکمه Send Kit Code رو می‌زنیم:

وارد کردن ایمیل در سایت fontawesome

سپس به inbox ایمیلی که وارد کردیم رجوع می‌کنیم. اینجا برای ما لینکی فرستاده شده که توسط اون، ما تایید می‌کنیم که ایمیل متعلق به خودمون رو فرستادیم، و نه دیگری. رو لینک مشخص شده کلیک می‌کنیم و مشخصات مورد نیاز رو تو صفحه بعد وارد می‌کنیم. (این تیکش راحته! با خودتون 🙂 )

مراجعه به صندوق ایمیل برای فعال سازی حساب کاربری fontawesome

در مرحله آخر، بعد از ساختن حساب کاربری تو سایت، صفحه زیر برامون باز می‌شه که لینک شخصی خودمون رو بهمون تحویل می‌ده:

صفحه حساب کاربری fontawesome

حالا کافیه لینک مورد نظر رو تو انتهای بدنه عنصر 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>

شاهد نتیجه زیر خواهیم بود:

معرفی بدنه کلی و کد آیکون در google icons

نام تمامی آیکون های این بخش، در وب سایت متریال دیزاین اومده که می‌تونین ازشون استفاده کنین.

پایان ترم

[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 می‌رسیم. تو این فصل یاد گرفتیم که چطور می‌تونیم بدون کمترین استفاده از عکس ها و راه های عجیب و غریب، فقط با استفاده از دو کتاب خونه، آیکون های مختلف رو وارد صفحمون کنیم.

امیدوارم که بهره کافی رو از این فصل برده باشین! 🙂

اگه نکته، پیشنهاد و انتقادی در رابطه با آموزش‌ها دارین، خیلی خیلی خوشحال می‌شیم که اون رو در بخش دیدگاه‌های پایگاه دانش میزفا ارسال کنین.

مدیر محتوا: علی اسمعیلی

فیلم آموزشی asp.net core 2

نوید معدن نژاد
یک عدد دانشجوی مهندسی مکانیک، که راه رسیدن به رویاهاش رو تو علوم کامپیوتری پیدا می‌کنه و سعی می‌کنه هیچوقت از یادگیری دست نکشه!
آموزش CSS
پایین سرفصل های CSS هست، روی منم کلیک کنی میتونی ببینی.

فیلم آموزشی asp.net core 2

14 نظر

14 پاسخ

  1. سلام وقتی فایل دانلود فونت اسوم را داخل پروژه ام هنگام باز کردن سایت به صورت مربع مربع نمایش داده میشود. مشکل چیه؟

  2. سلام من از لینک کتابخونه اوسام استفاده میکنم توی تگ هد بعد کلاس هم توی تگ دیو میزارم اما نمیدونم چرا اجرا نمیکنه

    1. سلام. خب اول باید کدتون رو دید و بعد در مورد حل مشکل نظر داد. احتمالا یا لینک رو به درستی فراخونی نکردین، یا نسخه فونت آسومی که استفاده می‌کنین از نسخه آیکون پایین‌تره، یا در نهایت ممکنه مشکل سینتکس داشته باشید 🙂

  3. ایا مشه همزمان از دو. کتابخومه گوگل و اواسام استفاده کرد؟

    1. سلام. بله چرا نشه.
      کافیه cdn هر دو کتابخونه رو در بدنه تگ head قرار بدین و ازشون استفاده کنین.

  4. سلام ممنون از آموزش خوبتون خیلی بدردم خورد 🙂
    ولی یه سوال متحرک سازی فقط میشه چرخش انجام داد؟
    یعنی اگه بخوام بالا و پایین بشه باید چیکار کنم ؟ اصلا میشه ؟
    ممنون 🙂

    1. سلام محمد مهدی، خواهش میکنیم.
      اره چرخش رو با کلاس های مختص خود آیکون میشه انجام داد. ولی تا جایی که من اطلاع دارم، fontawesome کلاسی برای انتقال آیکون ها معرفی نکرده.
      اما تو این کار رو میتونی خیلی ساده و شیک با کمک ترکیبی از مباحث ترنسفرم در CSS، ترنزیشن در CSS و انیمیشن در CSS انجام بدی.

  5. سلام
    ممنون از آموزشای خوبتون
    میخواستم بپرسم که استفاده از این آیکون ها باعث کاهش سرعت لود شدن سایت نمیشه ؟
    و اینکه برای گوگل آیکون ها نمیتونیم حالت هایی که برای awesomeicons استفاده کردیم رو استفاده کنیم ؟

    1. سلام اميرحسين. نه تاثير چنداني تو سرعت لود سايت ندارن چرا كه بر خلاف عكس ها، اينا از جنس نوشتار و text هستن.
      و براي گوگل آيكون ها هم، اگه منظورت همون كلاس هاييه كه به آيكون انيميشن يا اندازه مختلف ميدادن، نه نميشه استفاده كرد. فقط مختص به فونت آسوم هستن ?

  6. چون لینک کتابخانه رو وارد نکرده ایم انتهای body


    src=”https://kit.fontawesome.com/{ your kit code }.js” crossorigin=”anonymous”

  7. سلام انتهای قسمت روش kitcode به نظر اشتباه نوشتید
    اون کد اسکریپت باید توی قسمت head باشه نه body!

    1. سلام محمد. لینک دهی های تگ script رو هم میتونیم تو head انجام بدیم و هم انتهای body. اما در کل توصیه شده که این کار تو انتهای body صورت بگیره. دلیلش هم اینه که ممکنه یک سری از کد های javascript قبل از لود شدن کامل عناصر HTML داخل تگ body، اجرا بشن که خودش منجر به ارور میشه.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
معرفی جامع‌ترین ابزار سئو در ایران
بالای ۱۰ هزار عضو
PHZpZGVvIHdpZHRoPSI2MDAiIGhlaWdodD0iMzUwIiBwb3N0ZXI9Imh0dHBzOi8vbWl6ZmEuY29tL2Jsb2cvd3AtY29udGVudC91cGxvYWRzLzIwMjMvMDUvcG9zdGVyLW1pemZhLXRvb2xzLXZpZGVvLW1pbi5wbmciIGNvbnRyb2xzIHByZWxvYWQ9Im5vbmUiPiANCiAgIDxzb3VyY2Ugc3JjPSJodHRwczovL21pemZhLmNvbS9ibG9nL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDIzLzA1L21pemZhX3Rvb2xzXzcyMHAubXA0IiB0eXBlPSJ2aWRlby9tcDQiPg0KPC92aWRlbz4=