فصل css3 خلاصه مطالب جلسه 7- فونت آیکون ها در css

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

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

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