آیکون های متحرک و زنده liveicon+آموزش
دسته‌ها : گرافیک, وکتور سه شنبه, بهمن ۱۳, ۱۳۹۴ admin دیدگاه ها3

livicons-how

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

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

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

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

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

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

۳-کد های بالا را بعد از آپلود در قسمت 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

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

 

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

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


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

مطالب مشابه با این موضوع

بالا رفتن