سلام برنامه | HiProgram

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

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

سلام برنامه برای طراحی این آیکن های انیمیشنی از آیکن های سایت font awesome بهره میگیرد

تا قبل از این برای استفاده از این آیکن ها از روش خود سایت و از تگ <i> استفاده میکردیم

اما در این آموزش از Unicode های آن استفاده می کنیم

با استفاده از این روش شما امکان متحرک سازی آیکن ها را دارید

Unicode ها به قطعه کد های کوچک بی معنایی گفته میشود که آیکن خاصی را برای ما نمایش میدهند

برای ساخت آیکن های انیمیشنی ابتدا باید فایل css سایت font awesome را اضافه کنیم

برای این کار کافیست کد زیر را در head سایت خود قرار دهید

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

سپس کد زیر را به body خود اضافه کنید

<div id="div1" class="fa"></div>

و در نهایت کد های جاوا اسکریپت  زیر را به بعد از کد های html خود آیکن اضافه کنید

<script>
function chargebattery() {
  var a;
  a = document.getElementById("div1");
  a.innerHTML = "&#xf244;";
  setTimeout(function () {
      a.innerHTML = "&#xf243;";
    }, ۱۰۰۰);
  setTimeout(function () {
      a.innerHTML = "&#xf242;";
    }, ۲۰۰۰);
  setTimeout(function () {
      a.innerHTML = "&#xf241;";
    }, ۳۰۰۰);
  setTimeout(function () {
      a.innerHTML = "&#xf240;";
    }, ۴۰۰۰);
}
chargebattery();
setInterval(chargebattery, 5000);
</script>

در کد بالا  “&#xf240;”  دستور unicode آیکن ما است

کار ساخت آیکن متحرک تمام است

همچنین می توانید برای مشاهده جزئیات بیشتر ویدیو آموزش را همراه با سورس کد دریافت کنید

ویدیو آموزش در باکس دانلود زیر همین پست موجود است