آموزش طراحی وب

آموزش استفاده از Livicon ها بصورت کامل و جامع

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

1

آموزش استفاده از Livicon ها بصورت کامل و جامع

زمانی که فونت وب ها روی کار اومدند ، امکان استفاده از آیکون ها بصورت متن در صفحات وب ، برای طراحان وب فراهم شد که جایگاه خاصی بین کاربران و طراحان پیدا کرد.

اخیرا این علم پیشرفت کرده و شما میتونید آیکون ها رو بصورت متحرک در سایتتون استفاده کنید . به این فونت آیکون ها livicon می گویند که از تکنولوژی svg استفاده کرده است .

دوستانی که توانایی خرید از طریق paypal رو دارند این بسته ی ارزشمند رو میتونن از سایت codcanyon خریداری نمایند .

به دوستان داخل کشور و کسانی که توانایی خرید محصولات از خارج از کشور رو ندارن ، مژده میدم که به زودی امکانی توسط مدرسه مجازی ایرانیان برای شما دوستان فراهم میشه که میتونید به راحتی هر محصولی که میخواین رو از خارج کشور خریداری کنید و از لایسنس و نسخه ی معتبر اون محصول استفاده کنید .

 

نحوه ی استفاده از Livicon ها در صفحه ی وب

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

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

حالت اول اینکه از فایل پیشفرض livicon.js استفاده کنید که شامل ۴۰۴ آیکون میشه که این کار توصیه نمیشه چون به اندازه ی تمام آیکون ها حجم فایل افزایش پیدا میکنه .

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

با در نظر گرفتن حالت دوم این آموزش رو شروع می کنیم :

بسته ای که دریافت کردید باز کنید . پوشه ای به نام Customizer مشاهده می کنید ، وارد این پوشه بشید .

در این پوشه دو پوشه ی css و js وجود داره .

به پوشه ی css نیازی ندارید ، پوشه ی js رو باز کنید . از بین تمامی فایل های js موجود شما چهار فایل رو نیاز دارید.

jquery-1.9.1.min.js

raphael-min.js

livicons-1.2.min.js

json2.min.js

نکته اول : میتونید بجای نسخه ی ۹ جی کوئری از نسخه ی آخر هم استفاده کنید .

نکته دوم : livicons-1-2.min همون بسته ی کامل فونت آیکون ها هست که شما باید کد آیکون هایی که انتخاب کردید رو در این فایل قرار بدید که در ادامه نحوه ی انجام این کار رو خدمتتون آموزش میدم .

نکته سوم : از json2.min زمانی استفاده می کنید که بخواین آیکون ها در IE6 و IE7 هم قابل نمایش باشند . پس این فایل با شرط در html فراخوانی میشه که نحوه ی فراخوانیشو خدمتتون میگم .

 

حالا فایل های js مذکور رو کپی کنید و در پوشه ی مناسبی از قالبتون قرار بدید . پوشه ی مناسب ما در اینجا پوشه ی js هست.

 

فایل customizer.html رو باز کنید .

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

1

در مرحله ی بعد شما می تونید تنظیماتی رو روی بسته ی آیکون ها اعمال کنید :

2-1

تنظیماتی که در تصویر مشاهده می کنید تنظیمات پیشفرض هستند . تنظیماتی که شما نیاز دارید رو براتون توضیح میدم :

Default icons size : سایز پیشفرض آیکون هارو تعیین می کنید .

Default icons color : رنگ پیشفرض آیکون هارو تعیین می کنید .

Change color on hover : رنگ آیکون در زمان hover رو مشخص می کنید .

Are icons animated by default : در این گزینه مشخص می کنید که آیا آیکون ها انیمیشن داشته باشند یا خیر ؟

Is animation looped by default : در این گزینه مشخص می کنید که آیا انیمیشن آیکون ها مداوم باشد یا خیر ؟

یعنی زمانی که شما موس رو روی آیکون نگه میدارید انیمیشن آیکون یکبار اتفاق بیوفتد یا تا زمانی که موس روی آیکون هست انیمیشن تکرار شود ؟

Default event type : در این گزینه مشخص می کنید که انیمیشن آیکون با hover اتفاق بیوفتد یا با click .

Bind an event handler to parent element with a LivIcon : در این گزینه مشخص می کنید که آیا انیمیشن با hover یا کلیک روی عنصر والد آیکون ، اتفاق بیوفتد یا خیر ؟

در نظر بگیرید که ما برای نمایش آیکون از عنصر span استفاده کردیم . این عنصر span در یک div قرار گرفته که در حقیقت عنصر div والد عنصر span به حساب میاد . حالا اینجا تعیین می کنید انیمیشن حتما با hover یا کلیک روی span انجام بشه یا زمانی که hover یا کلیک روی div هم انجام میشه ، انیمیشن اتفاق بیوفته؟

Default morph transition time (ms) : مدت زمانی که میخواین در طی اون بازه ی زمانی transition انیمیشن انجام بشه رو تعیین می کنید که بر حسب میلی ثانیه هست .

Default hover color transition time (ms) : مدت زمانی که میخواین در طی اون بازه ی زمانی transition تغییر رنگ آیکون انجام بشه رو تعیین می کنید .

 

پس از انتخاب آیکون های دلخواه و اعمال تنظیمات ، به انتهای صفحه برید و دکمه Get the code رو کلیک کنید .

 

2-1

کدی که دریافت کردید رو در فایل livicons-1.2.min.js کپی کنید . پس از اینکه کدهارو در این فایل کپی کردیم برای بهینه تر شدن نام فایل ، اون رو به livicon.js تغییر نام میدیم .

 

خوب حالا یه فایل html ایجاد کنید و به شکل زیر کدهای js رو به فایل اضافه کنید :

تا اینجا شما ۹۰ درصد راه و اومدید حالا کافیه با استفاده از عناصر html که ما عموما از span و i استفاده می کنیم ، آیکون مورد نظرتون رو در صفحه نمایش بدید . حالا یک مثال میزنم و بعد خاصیت هایی که در این آیکون ها بکار میره رو توضیح میدم :

در اینجا ما آیکونی به شکل زیر خواهیم داشت که با رویداد hover انیمیشن اجرا میشه .

3

حالا خاصیت هایی که در این فونت آیکون به کار رفته رو براتون توضیح میدم :

class=”livicon” : این خصوصیت و مقدار همیشه ثابت هست .

data-n : نام آیکونی هست که مد نظر شماست . این نام رو از همون صفحه customizer کپی کنید .

data-c : این خاصیت رنگ آیکون رو مشخص می کنه .

data-hc : این خاصیت رنگ آیکون رو در زمان hover مشخص میکنه . یعنی زمانی که موس روی آیکون قرار میگیره رنگ آیکون به رنگ انتخابی شما تغییر می کنه .

 

بطور کل خاصیت هایی که میتونید در آیکون ها استفاده کنید رو براتون با مقدارهاشون لیست می کنم.

این خاصیت هارو میتونید بصورت کامل و یا خلاصه نویسی استفاده کنید :

data-name=”tag” : با این خاصیت میتونید نام آیکون رو تعیین کنید .

data-size=”32″ : با این خاصیت میتونید سایز آیکون رو تعیین کنید .

data-color=”original” : با این خاصیت میتونید رنگ آیکون رو مشخص کنید .

data-hovercolor=”#000″ : با این خاصیت میتونید رنگ آیکون هنگام hover رو مشخص کنید .

data-animate=”true” : با این خاصیت میتونید تعیین کنید که انیمیشن در آیکون اتفاق بیوفته یا خیر .

data-loop=”false” : با این خاصیت میتونید تعیین کنید که انیمیشن آیکون تکرارشدنی باشه یا خیر ؟ (مثال در بالا زده شد)

data-iteration=”3″ : با این خاصیت می تونید تعداد دفعات تکرار انیمیشن رو تعیین کنید .

data-duration=”0″ : با این خاصیت می تونید بازه ی زمانی رو مشخص کنید که انیمیشن طی اون بازه ی زمانی اتفاق بیوفته . که بر حسب میلی ثانیه محاسبه میشه .

data-eventtype=”hover” : با این خاصیت تعیین می کنید که انیمیشن هنگام hover اتفاق بیوفته یا click .

data-onparent=”false” : با این خاصیت تعیین می کنید که انیمیشن با hover یا کلیک روی عنصر والد انجام بشه یا تنها با hover یا کلیک روی عنصر آیکون انجام بشه ؟

 

این خاصیت هارو میتونید بصورت خلاصه هم استفاده کنید :

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

منتشر شده در چهارمین ماهنامه طراحی وب

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۲۹

  • آموزش خوبی بود ممنون
    ولی من یه مشکلی دارم و اون هم اینه که وقتی به صورت عادی این کد هارو مینویسم نشون میده
    ولی وقتی میخوام رو هاست آپلود کنم دیگه نشون نمیده
    نمیدونم مشکل چیه ولی از وقتی که کدهای PHP رو مینویسم دیگه اون آیکون ها نمیاد
    ممنون میشم بگید چیکار کنم
    بازم تشکر میکنم

    • سلام دوست عزیز
      نباید مشکلی داشته باشه ، اسامی و نام پوشه هارو چک کنید ، چون هاست لینوکس رو حروف بزرگ و کوچک حساس هست .

  • سلام
    من اسم ها رو کپی میکنم وقتی به صورت ساده مینوسم مشکلی نداره
    ولی وقتی یک کد PHP واردش میشه دیگه نشون نمیده

    بعد شرمنده یه سوال دیگه هم داشتم
    میخواستم بدونم چجوری میتونم رنگ آیکونا رو عوض کنم
    مثلا رنگش قرمزه وقتی هاور میشه رنگش به آبی تغییر کنه
    ممنون میشم پاسخ دهدی

    • فایل هاتون و بفرستید بررسی کنم.
      مورد دوم رو تو آموزش توضیح دادم ، شما دو خصوصیت در عنصر livicon دارید، اولی data-c=”#000″ رنگ اصلی آیکون هست دومی data-hc=”#ccc” رنگ hover آیکون هست .
      موفق باشید.

  • سلام . ممنون از آموزشتون
    من در وردپرس این کار رو انجام دادم .
    وقتی توی نوشته آیکون رو میزارم، روی حالت پیش نمایش نشون داده میشن
    ولی وقتی انتشار رو میزنم از آیکون ها خبری نیست .
    و چیزی نشون داده نمیشه

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

  • فقط منظور من از آیکون ها لایوآیکون ها نیستند
    منظورم آیکون های ساده هستند
    آیا امکانش هست که رنگ آیکون هارو عوض کرد ؟
    ممنون میشم پاسخ دهید
    با تشکر

    • سلام دوست عزیز
      برای حفظ کپی رایت لینک دانلود حذف شده ، در صورت تمایل می تونید سفارش بدید براتون از سایت codcanyon خریداری کنیم.

      موفق و پاینده باشید.

  • سلام. خسته نباشید
    در مورد تعیین موقعیت و مکان لایو آیکون ها چیزی نگفتین
    یعنی این کدها که گفتین فقط قابلیت نمایش لایو آیکون رو فراهم میکنه اما اینکه چطور براش تعیین موقعیت کنم؟
    از طریق css باید فراخوانی بشه یا توی همین کد html که دادین باید تعریف بشه ؟ چطوری؟
    لطفا راهنمایی بفرمایید

    • سلام دوست عزیز
      مهم همین مطلب بود که آموزش داده شده ، برای تعیین موقعیت میتونید با css به element مورد نظرتون موقعیت بدید ، اینکه لایو آیکون هست کار و سخت نمیکنه به این آیکون ها هم به چشم یه element نگاه کنید.
      موفق باشید

  • ممنون از پاسخگویی خوب شما
    ولی یک ابهام برام وجود داره کد html ای که استفاده میشه خودش با کلاس livicon شروع میشه
    ما که توی فایلهای سی اس اس سایتمون همچین کلاسی رو تعریف نکردیم پس از کجا فراخوانی میشه؟
    ضمنا اگه یک نمونه کد css و html ذکر کنید که چطور عمل موقعیت دهی انجام میشه ممنون میشم.
    با سپاس فراوان از سایت خوبتون

    • سلام دوست عزیز
      کلاس های لازم رو خود پلاگین جی کوئریش بهش اضافه میکنه، برای آموزش html و css به مباحث html و css مدرسه مراجعه کنید.
      موفق و پاینده باشید

  • تشکر به خاطر آموزش جامع و کاملتون.
    فقط توی قسمت خلاصه نویس ویژگی data-a=”true”
    رو اصلاح کنید.
    در ضمن من برای دانلود بسته livicons از سایتهای رایگان از دفتر مرجع تقلیدم پرسیدم گفتن اگه به خاطر تحریمهای ظالمانه و از روی دشمنی با نظام اسلامی امکان خرید نباشه میتونید رایگان دانلود کنید.
    و اینکه شما اگه میتونید واسطه خرید این بسته بشین لطفا قیمت خرید رو هم بذارین.

    • سلام دوست عزیز
      راه خرید وجود داره ، مثلا اینکه از واسطه ها استفاده کنید ، ماهم در گذشته واسطه ای نداشتیم و امکان خرید نبود اما در حال حاضر میتونیم براتون خریداری کنیم.
      قیمت به روز هست و نمیشه ثابت گذاشت . در سایت codecanyon قیمت به دلار هست تبدیل به ریال روز کنید + مالیاتی که این بین کسر میشه قیمت نهایی درمیاد . اگر بخواین قیمت نهاییش و براتون ارسال می کنیم.

  • آقای همت یار شما قضاوت کنین ببینین برای یه آموزش ساده آیکونهای زنده و برای چنین استفاده کوتاهی می ارزه که حدود ۵۰ یا ۶۰تومان و شاید هم بیشتر بپردازیم؟
    من برای ساخت شخصی خودم اگه باشه حتما این بسته رو خریداری میکنم ولی برای چنین مواقعی نه.

    • سلام ، تمایل داشتید خرید کنید و استفاده کنید وگرنه اجباری نیست . اموزش هم برای کسانی گذاشته شده که خریدن ولی نحوه استفاده از اون رو بلد نیستن . لینک دانلود این بسته از روی سایت خیلی وقته حذف شده و مجددا هم برای دانلود قرار داده نمیشه . تشکر

    • این آموزش برای افرادی تهیه شده که این پکیج رو دارند و نیاز به آموزش دارن تا ازش استفاده کنند ، در صورتی که این پکیج رو داشته باشید این آموزش میتونه براتون مفید باشه.
      موفق باشید

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

    • سلام دوست عزیز
      کافیه به عنصری که این آیکون رو بهش اختصاص دادید margin بدید. اما برای درج padding اون رو به عنصر مادر آیکون بدید به خود آیکون ندید.
      موفق و پاینده باشید

  • با سلام و خسته نباشید
    بعد از انجام تمامی مراحل
    حال باید چطوری آیکون مورد نظر رو داخل یک فایل css فراخوانی کرد
    مثلا در فایل template.css که در پوشه css قالبم وجود داره؟؟

    • سلام دوست عزیز
      یعنی میخواین به آیکون مورد نظرتون استایل بدید؟

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین