امروزه آیکون‌ها همه جا هستند؛ برخی از آن‌ها آنقدر قوی و جهانی شدند که ما با دیدن آن‌ها سریع هدف از استفاده‌ی آن‌ها را تشخیص می‌دهیم. آیکون‌های یک برند، محصول و یا پیام را بدون نیاز به هیچ کلمه‌ای نشان می‌دهند و در ابعاد کوچک‌تر، برای بیان احساسات در پیام‌ها از یک فرد به شخص دیگر استفاده می‌شوند. تحقیقات نشان داده‌اند که آیکون ها، زمانی که به درستی استفاده شوند، می‌توانند قابلیت استفاده از یک برنامه، سایت و یا محصول را افزایش دهند. از طرف دیگر، وقتی از یک آیکون به اشتباه استفاده می‌شود، می‌تواند باعث سردرگمی شده و به طور کامل بر تمایل کاربر برای استفاده از آن تاثیر بگذارند. پس این سوال مطرح است که چگونه می‌توانیم از آن‌ها به بهترین روش برای افزایش تجربه‌ی کاربری وب سایت و محصولات نرم‌افزاری استفاده کنیم؟ در این مقاله می‌خواهیم طراحی‌ها و مجموعه آیکون‌های زیبا برای طراحی سایت و برنامه نویسی پرکاربرد و زیباتر را معرفی کنیم.

Font Awesome

Font Awesome معروف‌ترین و پرکاربردترین مجموعه آیکون وب هست. این مجموعه‌ تعداد زیادی از آیکون‌ها را در اختیار شما قرار داده و در بیشتر مرورگرها پشتیبانی می‌شود. Font Awesome از قوانین رابط کاربری و تجربه‌ی کاربری به خوبی استفاده کرده و کاربران زیادی با آن ارتباط برقرار می‌کنند.

Feather Icons

Feather Icons یکی از معروف‌ترین مجموعه آیکون‌های رایگان در سطح وب است. همه‌ی آیکون‌ها در سایز 24 در 24 ساخته شده‌اند و استایل گرد شده شبیه به هم دارند که به آن‌ها ظاهر یکپارچه و یک دستی را می‌دهد. این آیکون برای فریم ورک‌های مختلف مانند React، Vue، Angular، Linea پیاده سازی شده است و می‌توانید از آن‌ها استفاده کنید. فرمت این آیکون‌ها SVG هست و 240 آیکون در این مجموعه قرار دارد.

Linea

برای دانلود رایگان آیکون PNG و SVG می‌توانید به مجموعه‌ی Linea مراجعه کنید. تعداد آیکون‌های موجود در آن بیش از 730 مورد هست. استایل این آیکون‌ها بسیار زیبا و به صورت خطی هستند. همه‌ی آیکون‌ها در دسته بندی‌های مشخصی از قبیل ساده، موسیقی، تجاری، نرم افزار و ... قرار داده شده‌اند.

Octicons

Octicons مجموعه‌ی آیکون‌های زیبای ساخته شده به وسیله Github است. در اصل آیکون‌های مربوط به Github و برنامه نویسی مثل پایگاه داده و عملیات‌های مختلف Git و ... در این مجموعه آیکون قرار داده شده‌اند. فرمت این آیکون‌ها SVG می‌باشد و بیش از 170 آیکون در این مجموعه قرار دارد.

Icomoon.io

در سایت Icomoon.io آیکون‌های زیادی وجود دارد. روند در این سایت کمی متفاوت است. ابتدا باید آیکون‌های موردنظر را با کلیک کردن انتخاب کرده و سپس در قسمت پایین روی گزینه‌های موجود مانند Font کلیک کنید تا به صفحه‌ی بعدی منتقل شوید. در این صفحه اطلاعاتی راجع به استفاده از آن آیکون به شما داده می‌شود. برای دریافت آیکون‌های انتخابی کافی است بر روی Download کلیک کنید. با این کار یک فایل zip دانلود شده که حاوی دمو نیز هست و تنها کافی است که کدها را به برنامه یا وبسایت خود اضافه کنید.

Material Icons

آیکون فونت Material Icons مجموعه‌ی رسمی و توصیه شده‌ی گوگل است که در Google material design از آن استفاده می‌شود. این مجموعه بیش از 900 آیکون را در خود جا داده است که همه در استایل طراحی متریال هستند و می‌توانید به صورت رایگان از آن‌ها استفاده کنید.

Icono

این مجموعه شامل تعدادی آیکون ساخته شده با CSS می‌باشد. برای استفاده از این آیکون‌ها شما باید کدهای CSS را در محل موردنظر خود قرار داده و کلاس آن را به المان HTML نسبت دهید. بیش از 130 آیکون در مجموعه Icono گنجانده شده است.

CSS ICON

مجموعه آیکون CSS ICON نیز با استفاده از CSS ساخته شده است. نحوه‌ی استفاده از این مورد نیز شبیه به مجموعه‌ی قبلی است و به راحتی می‌توانید کدهای مربوط به آیکون مورد نظر را در سایت خود قرار دهید.

interface-icons

مجموعه‌ای متشکل از 100 آیکون با کیفیت و فلت (flat) که به صورت رایگان قابل استفاده است. این آیکون‌ها در دو فرمت SVG و PNG قرار داده شده‌اند.

Lulu-Icon

این مجموعه شامل 50 عدد آیکون رنگی و برداری است که به صورت رایگان برای دانلود و استفاده در دسترس کاربران قرار گرفته است. آیکون‌های Lulu-Icon در 3 فرمت AI و EPS و PNG وجود دارند.

Glyph

در بخش‌های قبلی مجموعه‌هایی با فرمت SVG را معرفی کردیم. اگر از تصاویر SVG استفاده کنید، هر چقدر که صفحه را zoom کنید، کیفیت آن تغییری نمی‌کند؛ چراکه تصاویر SVG وکتور و یا به اصطلاح برداری هستند. در Glyph نیز آیکون‌های SVG با کیفیت برای سایت‌های مدرن ساخته شده است. شما می‌توانید این آیکون‌ها را سفارشی کرده و یا فقط از یکی از آن‌ها در سایت خود استفاده کنید و بقیه‌ی موارد را Load نکنید. 800 آیکون در این مجموعه قرار دارد.

SVGIcons

با استفاده از این ابزار می‌توانید آیکون‌های زیبایی را به صورت SVG در سایت خود قرار دهید. با این روش، نیازی نیست که به سرور درخواست ( Request ) فرستاده شود و همه‌ی آیکون‌ها را به صورت کدهای SVG در سند خود قرار می‌دهیم.

برای استفاده از این مجموعه آیکون‌های زیبا برای طراحی سایت، ابتدا باید به سایت SVGIcons رفته و فایل‌های مورد نظر را دانلود کنید. سپس یک فایل با نام index.html بسازید و کدهای زیر را درون آن قرار دهید:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>7Learn.com - SVG Icons</title>
	<link rel="stylesheet" type="text/css" href="svgicons.css">
</head>
<body>
</body>
</html>

تا اینجا فایل موردنظر را وارد کردیم. در ابتدا باید فایل svgicons.css را در قسمت head اضافه کنید، به صورت زیر:

<link rel="stylesheet" type="text/css" href="svgicons.css">

اگر این فایل را باز کنید می‌توانید کدهای زیر را مشاهده کنید:

/* -----
SVG Icons - svgicons.sparkk.fr
----- */
.svg-icon {
  width: 3em;
  height: 3em;
}
.svg-icon path,
.svg-icon polygon,
.svg-icon rect {
  fill: #4691f6;
}
.svg-icon rect:hover {
  fill: #d35400;
}
.svg-icon polygon:hover {
  fill: #d35400;
}
.svg-icon path:hover {
  fill: #d35400;
}
.svg-icon circle {
  stroke: #4691f6;
  stroke-width: 1;
}

می بینید که برای کلاس svg-icon کد زیر را قرار دادیم :

.svg-icon {
  width: 3em;
  height: 3em;
}

می‌توانید عرض و ارتفاع آیکون‌ها و یا رنگ آن‌ها را ( برای مثال در زمان هاور ) تغییر دهید. حالا باید به سایت اصلی رفته و آیکون مورد نظر خود را پیدا کنید:

بعد از کلیک روی آیکون این پنجره باز می‌شود و می‌توانید کدهای مورد نظر را کپی کرده و در سایت یا برنامه‌ی خود قرار دهید.

کدهای بالا به صورت زیر است:

<svg class="svg-icon" viewBox="0 0 20 20">
	<path fill="none" d="M9.426,7.625h0.271c0.596,0,1.079-0.48,1.079-1.073V4.808c0-0.593-0.483-1.073-1.079-1.073H9.426c-0.597,0-1.079,0.48-1.079,1.073v1.745C8.347,7.145,8.83,7.625,9.426,7.625 M9.156,4.741c0-0.222,0.182-0.402,0.404-0.402c0.225,0,0.405,0.18,0.405,0.402V6.62c0,0.222-0.181,0.402-0.405,0.402c-0.223,0-0.404-0.181-0.404-0.402V4.741z M12.126,7.625c0.539,0,1.013-0.47,1.013-0.47v0.403h0.81V3.735h-0.81v2.952c0,0-0.271,0.335-0.54,0.335c-0.271,0-0.271-0.202-0.271-0.202V3.735h-0.81v3.354C11.519,7.089,11.586,7.625,12.126,7.625 M6.254,7.559H7.2v-2.08l1.079-2.952H7.401L6.727,4.473L6.052,2.527H5.107l1.146,2.952V7.559z M11.586,12.003c-0.175,0-0.312,0.104-0.405,0.204v2.706c0.086,0.091,0.213,0.18,0.405,0.18c0.405,0,0.405-0.451,0.405-0.451v-2.188C11.991,12.453,11.924,12.003,11.586,12.003 M14.961,8.463c0,0-2.477-0.129-4.961-0.129c-2.475,0-4.96,0.129-4.96,0.129c-1.119,0-2.025,0.864-2.025,1.93c0,0-0.203,1.252-0.203,2.511c0,1.252,0.203,2.51,0.203,2.51c0,1.066,0.906,1.931,2.025,1.931c0,0,2.438,0.129,4.96,0.129c2.437,0,4.961-0.129,4.961-0.129c1.117,0,2.024-0.864,2.024-1.931c0,0,0.202-1.268,0.202-2.51c0-1.268-0.202-2.511-0.202-2.511C16.985,9.328,16.078,8.463,14.961,8.463 M7.065,10.651H6.052v5.085H5.107v-5.085H4.095V9.814h2.97V10.651z M9.628,15.736h-0.81v-0.386c0,0-0.472,0.45-1.012,0.45c-0.54,0-0.606-0.515-0.606-0.515v-3.991h0.809v3.733c0,0,0,0.193,0.271,0.193c0.27,0,0.54-0.322,0.54-0.322v-3.604h0.81V15.736z M12.801,14.771c0,0,0,1.03-0.742,1.03c-0.455,0-0.73-0.241-0.878-0.429v0.364h-0.876V9.814h0.876v1.92c0.135-0.142,0.464-0.439,0.878-0.439c0.54,0,0.742,0.45,0.742,1.03V14.771z M15.973,12.39v1.287h-1.688v0.965c0,0,0,0.451,0.405,0.451s0.405-0.451,0.405-0.451v-0.45h0.877v0.708c0,0-0.136,0.901-1.215,0.901c-1.08,0-1.282-0.901-1.282-0.901v-2.51c0,0,0-1.095,1.282-1.095S15.973,12.39,15.973,12.39 M14.69,12.003c-0.405,0-0.405,0.45-0.405,0.45v0.579h0.811v-0.579C15.096,12.453,15.096,12.003,14.69,12.003"></path>
</svg>

در نهایت بعد از قرار دادن کدها، فایل به صورت زیر خواهد بود:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>7Learn.com - SVG Icons</title>
	<link rel="stylesheet" type="text/css" href="svgicons.css">
</head>
<body>
	<svg class="svg-icon" viewBox="0 0 20 20">
		<path fill="none" d="M9.426,7.625h0.271c0.596,0,1.079-0.48,1.079-1.073V4.808c0-0.593-0.483-1.073-1.079-1.073H9.426c-0.597,0-1.079,0.48-1.079,1.073v1.745C8.347,7.145,8.83,7.625,9.426,7.625 M9.156,4.741c0-0.222,0.182-0.402,0.404-0.402c0.225,0,0.405,0.18,0.405,0.402V6.62c0,0.222-0.181,0.402-0.405,0.402c-0.223,0-0.404-0.181-0.404-0.402V4.741z M12.126,7.625c0.539,0,1.013-0.47,1.013-0.47v0.403h0.81V3.735h-0.81v2.952c0,0-0.271,0.335-0.54,0.335c-0.271,0-0.271-0.202-0.271-0.202V3.735h-0.81v3.354C11.519,7.089,11.586,7.625,12.126,7.625 M6.254,7.559H7.2v-2.08l1.079-2.952H7.401L6.727,4.473L6.052,2.527H5.107l1.146,2.952V7.559z M11.586,12.003c-0.175,0-0.312,0.104-0.405,0.204v2.706c0.086,0.091,0.213,0.18,0.405,0.18c0.405,0,0.405-0.451,0.405-0.451v-2.188C11.991,12.453,11.924,12.003,11.586,12.003 M14.961,8.463c0,0-2.477-0.129-4.961-0.129c-2.475,0-4.96,0.129-4.96,0.129c-1.119,0-2.025,0.864-2.025,1.93c0,0-0.203,1.252-0.203,2.511c0,1.252,0.203,2.51,0.203,2.51c0,1.066,0.906,1.931,2.025,1.931c0,0,2.438,0.129,4.96,0.129c2.437,0,4.961-0.129,4.961-0.129c1.117,0,2.024-0.864,2.024-1.931c0,0,0.202-1.268,0.202-2.51c0-1.268-0.202-2.511-0.202-2.511C16.985,9.328,16.078,8.463,14.961,8.463 M7.065,10.651H6.052v5.085H5.107v-5.085H4.095V9.814h2.97V10.651z M9.628,15.736h-0.81v-0.386c0,0-0.472,0.45-1.012,0.45c-0.54,0-0.606-0.515-0.606-0.515v-3.991h0.809v3.733c0,0,0,0.193,0.271,0.193c0.27,0,0.54-0.322,0.54-0.322v-3.604h0.81V15.736z M12.801,14.771c0,0,0,1.03-0.742,1.03c-0.455,0-0.73-0.241-0.878-0.429v0.364h-0.876V9.814h0.876v1.92c0.135-0.142,0.464-0.439,0.878-0.439c0.54,0,0.742,0.45,0.742,1.03V14.771z M15.973,12.39v1.287h-1.688v0.965c0,0,0,0.451,0.405,0.451s0.405-0.451,0.405-0.451v-0.45h0.877v0.708c0,0-0.136,0.901-1.215,0.901c-1.08,0-1.282-0.901-1.282-0.901v-2.51c0,0,0-1.095,1.282-1.095S15.973,12.39,15.973,12.39 M14.69,12.003c-0.405,0-0.405,0.45-0.405,0.45v0.579h0.811v-0.579C15.096,12.453,15.096,12.003,14.69,12.003"></path>
	</svg>
</body>
</html>

برای مطالعه‌ی بیشتر می‌توانید به این لینک مراجعه کنید.

Geomicons

استفاده از این مجموعه آیکون به صورت رایگان می‌باشد. همان‌طور که در بخش قبل گفتیم آیکون‌های SVG به دلیل کیفیت بالایی که دارند و تسریع در لودشدن سایت یا برنامه، بسیار کاربردی هستند. برای استفاده ابتدا به صفحه‌ی این مجموعه در سایت Github رفته و فایل‌های مورد نظر را دانلود کنید. در این مطلب ما به geomicons.min.js نیاز داریم. فایل را به مشابه بخش قبلی وارد کرده و سپس به المانی که می‌خواهید آیکون داشته باشد، کلاس دلخواه js-geomicon را نسبت دهید. برای مثال:

<span class="js-geomicon"></span>

در نهایت بعد از مشخص کردن آیکون موردنظر، نامش را درون خاصیت data-icon قرار دهید. برای مطالعه‌ی بیشتر می‌توانید به این لینک مراجعه کنید.

Ionicons

آیکون فونت Ionicons ظاهر بسیار زیبا و خوبی داشته و تیم پشتیبان آن تیم Ionic Framework هست. در این آیکون فونت، یک مجموعه آیکون‌های زیبا برای طراحی سایت با بیش از 260 آیکون در اختیار شما قرار می‌گیرد. برای استفاده از این مجموعه به صفحه‌ی مربوط به این آیکون فونت در سایت Github رفته و فایل‌های موردنظر را دانلود کنید. در این مطلب ما به ionicons.min.css و فونت‌های زیر نیاز داریم:

• ionicons.eot
• ionicons.svg
• ionicons.ttf
• ionicons.woff

سایر مراحل مشابه با بخش‌های قبل است و باید فایل index ساخته و کدهای مورد نظر را وارد کنید و آیکون‌های مورد نیاز را نسبت دهید. برای مطالعه‌ی بیشتر می‌توانید از این لینک استفاده کنید.

Html Icons

افراد بسیاری هستند که تمایل دارند تصویر یا آیکون فونتی را به کار نبرند و فقط از کد Hex در HTML استفاده کنند. HTML Icon‌ها با این هدف به وجود آمده‌اند. همچنین استفاده از HTML Icon‌ها در ویرایشگرها بسیار کاربرد دارد. شما می‌توانید با مراجعه به این لینک در سایت W3Schools کد و تصویر آیکون موردنظر خود را پیدا کرده و به عنوان آیکون برنامه یا آیکون وب سایت استفاده کنید. برای تغییر مجموعه‌ی آیکون نیز می‌توانید از نوار کناری سمت چپ سایت کمک بگیرید. برای مثال کد ☁ مربوط به آیکون ابر یا Cloud می‌باشد.

Animocons

در بخش اول مقاله‌ی ساخت دکمه با HTML، CSS و جاوا اسکریپت در مورد هاور صحبت کردیم. آموختیم که هاور (hover) یکی از کلاس‌های pseudo-classes است که برای انتخاب ظاهر یک المان، هنگامی که نشانگر موس یا هر وسیله‌ی دیگری روی آن قرار می‌گیرد، استفاده می‌شود. هاور می‌تواند برای لینک‌ها، تصاویر و ... تعریف شود که یکی از این المان‌ها آیکون است. در اینجا نیز با یک مثال شیوه‌ی استفاده از کدهای مربوط به هاور را مرور می‌کنیم تا بتوانید سایتی زیباتر و کاربرپسندتر را داشته باشید. توجه کنید که در این بخش از mo.js استفاده شده است. این ابزار انیمیشن‌های گرافیکی بسیار زیبایی را به وجود می‌آورد.

کد HTML:

<div id="container">
	<button class="icobutton icobutton--heart"><span class="fa fa-heart"></span><span class="icobutton__text icobutton__text--side">10</span></button>
</div>

کد CSS:

#container {
	text-align: center;
	padding: 100px 0;
}
/* Icons button */
.icobutton {
	font-size: 3em;
	position: relative;
	margin: 0;
	padding: 0;
	color: #c0c1c3;
	border: 0;
	background: none;
	overflow: visible;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	cursor: pointer;
}
.icobutton .fa {
	display: block;
	padding: 0 0.1em;
}
.icobutton__text {
	font-size: 0.75em;
	position: absolute;
	top: 100%;
	left: -50%;
	width: 200%;
	text-align: center;
	line-height: 1.5;
	color: #a6a6a6;
}
.icobutton__text--side {
	top: 0;
	left: 100%;
	width: 100%;
	width: auto;
	padding: 0 0 0 0.25em;
}
/* fix for mo.js */
.icobutton svg {
	left: 0;
}
.icobutton:hover,
.icobutton:focus {
	outline: none;
}
/* Unicorn */
.icobutton--unicorn svg {
	fill: #c0c1c3;
}

کد جاوا اسکریپت:

;(function(window) {
	'use strict';
	// http://stackoverflow.com/a/11381730/989439
	function mobilecheck() {
		var check = false;
		(function(a){if(/(android|ipad|playbook|silk|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
		return check;
	}
	// taken from mo.js demos
	var //isIOS = isIOSSafari(),
		//clickHandler = isIOS || isTouch() ? 'touchstart' : 'click';
		clickHandler = mobilecheck() ? 'touchstart' : 'click';
	function extend( a, b ) {
		for( var key in b ) { 
			if( b.hasOwnProperty( key ) ) {
				a[key] = b[key];
			}
		}
		return a;
	}
	function Animocon(el, options) {
		this.el = el;
		this.options = extend( {}, this.options );
		extend( this.options, options );
		this.checked = false;
		this.timeline = new mojs.Timeline();
		for(var i = 0, len = this.options.tweens.length; i < len; ++i) {
			this.timeline.add(this.options.tweens[i]);
		}
		var self = this;
		this.el.addEventListener(clickHandler, function() {
			if( self.checked ) {
				self.options.onUnCheck();
			}
			else {
				self.options.onCheck();
				self.timeline.start();
			}
			self.checked = !self.checked;
		});
	}
	Animocon.prototype.options = {
		tweens : [
			new mojs.Burst({
				shape : 'circle',
				isRunLess: true
			})
		],
		onCheck : function() { return false; },
		onUnCheck : function() { return false; }
	};
	function init() {
		/* Icon 14 */
		var el14 = document.querySelector('button.icobutton'), el14span = el14.querySelector('span'), el14counter = el14.querySelector('span.icobutton__text');
		new Animocon(el14, {
			tweens : [
				// ring animation
				new mojs.Transit({
					parent: el14,
					duration: 750,
					type: 'circle',
					radius: {0: 40},
					fill: 'transparent',
					stroke: '#F35186',
					strokeWidth: {35:0},
					opacity: 0.2,
					x: '50%',     
					y: '45%',
					isRunLess: true,
					easing: mojs.easing.bezier(0, 1, 0.5, 1)
				}),
				new mojs.Transit({
					parent: el14,
					duration: 500,
					delay: 100,
					type: 'circle',
					radius: {0: 20},
					fill: 'transparent',
					stroke: '#F35186',
					strokeWidth: {5:0},
					opacity: 0.2,
					x: '50%', 
					y: '50%',
					shiftX : 40, 
					shiftY : -60,
					isRunLess: true,
					easing: mojs.easing.sin.out
				}),
				new mojs.Transit({
					parent: el14,
					duration: 500,
					delay: 180,
					type: 'circle',
					radius: {0: 10},
					fill: 'transparent',
					stroke: '#F35186',
					strokeWidth: {5:0},
					opacity: 0.5,
					x: '50%', 
					y: '50%',
					shiftX : -10, 
					shiftY : -80,
					isRunLess: true,
					easing: mojs.easing.sin.out
				}),
				new mojs.Transit({
					parent: el14,
					duration: 800,
					delay: 240,
					type: 'circle',
					radius: {0: 20},
					fill: 'transparent',
					stroke: '#F35186',
					strokeWidth: {5:0},
					opacity: 0.3,
					x: '50%', 
					y: '50%',
					shiftX : -70, 
					shiftY : -10,
					isRunLess: true,
					easing: mojs.easing.sin.out
				}),
				new mojs.Transit({
					parent: el14,
					duration: 800,
					delay: 240,
					type: 'circle',
					radius: {0: 20},
					fill: 'transparent',
					stroke: '#F35186',
					strokeWidth: {5:0},
					opacity: 0.4,
					x: '50%', 
					y: '50%',
					shiftX : 80, 
					shiftY : -50,
					isRunLess: true,
					easing: mojs.easing.sin.out
				}),
				new mojs.Transit({
					parent: el14,
					duration: 1000,
					delay: 300,
					type: 'circle',
					radius: {0: 15},
					fill: 'transparent',
					stroke: '#F35186',
					strokeWidth: {5:0},
					opacity: 0.2,
					x: '50%', 
					y: '50%',
					shiftX : 20, 
					shiftY : -100,
					isRunLess: true,
					easing: mojs.easing.sin.out
				}),
				new mojs.Transit({
					parent: el14,
					duration: 600,
					delay: 330,
					type: 'circle',
					radius: {0: 25},
					fill: 'transparent',
					stroke: '#F35186',
					strokeWidth: {5:0},
					opacity: 0.4,
					x: '50%', 
					y: '50%',
					shiftX : -40, 
					shiftY : -90,
					isRunLess: true,
					easing: mojs.easing.sin.out
				}),
				// icon scale animation
				new mojs.Tween({
					duration : 1200,
					easing: mojs.easing.ease.out,
					onUpdate: function(progress) {
						if(progress > 0.3) {
							var elasticOutProgress = mojs.easing.elastic.out(1.43*progress-0.43);
							el14span.style.WebkitTransform = el14span.style.transform = 'scale3d(' + elasticOutProgress + ',' + elasticOutProgress + ',1)';
						}
						else {
							el14span.style.WebkitTransform = el14span.style.transform = 'scale3d(0,0,1)';
						}
					}
				})
			],
			onCheck : function() {
				el14.style.color = '#F35186';
				el14counter.innerHTML = Number(el14counter.innerHTML) + 1;
			},
			onUnCheck : function() {
				el14.style.color = '#C0C1C3';
				var current = Number(el14counter.innerHTML);
				el14counter.innerHTML = current > 1 ? Number(el14counter.innerHTML) - 1 : '';
			}
		});
		/* Icon 14 */
	}
	init();
})(window);

دمو

Liveicons

این پلاگین این امکان را به شما می‌دهد تا به جای استفاده از آیکون‌های ثابت و بی‌روح، از آیکون‌های متحرک و زنده استفاده کنید. برخلاف تصور عموم، این مجموعه آیکون یک تصویر gif و مواردی با این فرمت نیست؛ بلکه خود این پلاگین از پلاگین دیگری به اسم raphael.js برای خلق آیکون‌ها استفاده می‌کند. برای استفاده از این پلاگین حتما بخش اسناد و راهنمای استفاده از آن را در خود سایت Liveicons مطالعه کنید. نمونه‌های این مجموعه را نیز می‌توانید از اینجا ببینید.

جمع‌بندی

در این مقاله منابع دانلود مجموعه آیکون‌های زیبا برای طراحی سایت و برنامه نویسی را معرفی کردیم. گرچه هر کدام از این مجموعه‌ها علاوه بر اینکه از سایت خود قابل دانلود هستند، اما می‌توان به سایت هایی مانند flaticon، icons8 و iconfinder و ... نیز مراجعه کرد و ضمن مشاهده و مقایسه‌ی چندین مجموعه کنار یکدیگر، مرتبط‌ترین و بهترین آیکون‌ها را انتخاب نمود. شما از چه مجموعه آیکون فونتی استفاده می‌کنید؟ در بخش نظرات آن را با ما و سایر کاربران به اشتراک بگذارید.

اگر به یادگیری بیشتر در زمینه HTML , CSS و طراحی وب علاقه‌مند هستی، با شرکت در دوره آموزش طراحی وب، در کمتر از یک‌سال به یک طراح وب همه فن حریف تبدیل می‌شوی که آماده‌ی استخدام ، دریافت پروژه و کسب درآمد هستی.