آیکون های متحرک و زنده liveicon+آموزش
دسته‌ها : آموزش های طراحی سایت , آموزش وردپرس , کد های کاربردی , متفرقه ۲۵ تیر ۱۳۹۵ - ۷:۲۱ امیر رضائی بدون نظر

livicons-how

امروز می خواهیم نحوه استفاده از آیکون های زنده و متحرک رو در طراحی سایت بهتون آموزش بدیم همانگونه که از اسمش پیداست liveicons مجموعه ای از آیکون ها زنده و متحرک هستند که با تکنولوژی svg ساخته شده اند و با چند کد جاوا اسکریپت در سایت فراخوانی می شوند

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

آموزش استفاده از LivIcons

۱-در ابتدا بسته آماده شده برای این قسمت رو از پایین همین صفحه دانلود کنید

۲-در درون بسته پوشه ای با نام Customizer وجود دارد که می توانید از این قسمت فقط آیکون هایی که نیاز دارید را انتخاب و فایل ها را آپلود کنید تا حجم فایل ها کاهش پیدا کنه ولی اگه می خواهید تا تمام آیکون ها نمایش داده بشه فایل های موجود در پوشه upload را در هاست خود آپلود کنید

بهتر است که فایل های فراخوانی js را در هاست خود آپلود کنید و از هاست خود آنها را فراخوانی نمایید.

حتما بخوانید  منوی زیبا و حرفه ای برای select

۳-کد های بالا را بعد از آپلود در قسمت head قاب خودتون قرار داده و فراخوانی کنید

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/raphael-min.js"></script>
<script src="js/json2.min.js"></script>
<script src="js/livicons-1.3.min.js"></script>

توجه : دقت کنید تا آدرس فایل ها با جایی که شما آپلود کرده اید متناسب باشد
۴-سپس آیکون ها را به شکل زیر فراخوانی کنید

<span class="livicon" data-n="user" data-s="20" data-c="#00000" data-hc="false">&lt;/span>

 

معرفی خاصیت ها:

data-n: نام آیکون
data-c: رنگ آیکون
data-hc: رنگ آیکون زمانی که ماوس روی آن قرار میگیرد
data-s: اندازه فونت

حال ما در نمونه کد فوق درخواست کرده اییم به شکل زیر رفتار کن:

آیکون user را در سایز ۲۰ پیکسل با رنگ سیاه نمایش بده و رنگ ماوس را در نظر نگیر.

حتما توجه کنید که برای اجرای آیکون ها باید کتابخانه جی کیوئری (jquery-1.9.1.min.js)در قالب شما فراخوانی شده باشد

برای دانستن نام آیکون های زنده به سایت livicons.com مراجعه کنید و نام آنها را دریافت کنید.

livicons

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

 

دانلود پیش نمایش

امیر رضائی وبسایت


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

بهترین و راحت ترین راه برای ارتباط با شما کانال تلگرام بلاگ تم

newslatter

با اشتراک در خبرنامه از آخرین آموزش ها و خدمات مطلع شوید !

از عضویت شما در خبرنامه بلاگ تم متشکریم!
best web design software

امتیاز دهید