سلام دوستان خلاصه مطالبی که استاد توی این جلسه گفتن رو قرار دادم اگه مطلب اضافه‌تری رو دارین که بنده جا انداختم

لطفا اضافه کنید

ما قبلا برای استفاده از آیکون‌ها میومدیم و از تصاویر استفاده میکردیم که این کار باعث افزایش سرعت لود وب سایت امون می‌شود که برای جلوگیری یا رفع این مشکل از فونت آیکون‌ها استفاده میکنیم که پر استفاده‌ترین آن‌ها عبارت اند از  glyphs Icon Bootstrap  و font awesome  و material-icons

ما برای استفاده از اون‌ها میتوانیم یا اون‌ها رو دانلود کنیم و طبق فونت‌ها از اون‌ها استفاده بکنیم یا هم بیایم و با استفاده از CDN‌ها از اون‌ها استفاده بکنیم 

نمونه مثال از متریال آیکون

 <link
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"
    />

حال برای استفاده هم باید بیایم و از تگ i  استفاده بکنیم

 <i class="material-icons">face</i>
                          نام آیکون

همچنین ما برای تراز کردن آیکون‌ها با متن هامون میتونیم بیایم و از vertical-align‌ها هم استفاده بکنیم

برای استفاده از فونت آسوم هم باید بیایم و CDN اشو به پروژه امون اضافه بکنیم

   <link
      rel="stylesheet"
      href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
      integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p"
      crossorigin="anonymous"
    />

و نمونه استفاده از اون

  <i class="fab fa-adobe"></i>

حال برا استفاده از آیکون‌های بوت استرپ که تنوع آیکون هاش نسبت به قبلی پایین‌تر هستش

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

و دادن آیمون ها 

<span class="glyphicon glyphicon-heart"></span>