استفاده از فونت آیکون

۱۲ امتیاز

Loading…

امروزه در تمام سایت‌ها، برنامه‌ها، اپلیکشین ها و … برای انتقال مفهوم و زیبایی از یکسری اشکال به‌صورت سمبولیکی استفاده می‌کنند که باعث جذابیت و راحتی بیشتر شده. ما در اینجا تصور داریم که شما برای سایت خود به دنبال یکسری آیکون هستید پس باید زیبا و کم‌حجم باشد و اگر در ذهنتان یکسری آیکون‌های با تصاویر شطرنجی می‌باشد، باید گفت شما احتمالاً از اصلاحات CSS استفاده می‌کنید.
یکی از کارهایی که می‌توانید در این خصوص انجام دهید استفاده از فونت آیکون بجای آیکون‌های تصویری می‌باشد که یکسری تصاویری به‌صورت وکتوری و در قالب فونت ارائه می‌شوند و طبیعتاً دارای ویژگی‌های خاصی ازجمله بارگذاری ساده و کم‌حجم، عدم محدودیت در سایز و … را دارا می‌باشد. با این کار سرعت بارگذاری صفحه سایت شما به مقدار قابل‌توجهی افزایش پیدا خواهد کرد و جایگزین نمودن فونت آیکون و حذف تصاویر حجم سایتتان نیز کاهش پیدا خواهد کرد.
معروف‌ترین آیکون‌های که می‌توان در سایت خود استفاده کنید آیکون‌های با فرمت SVG، فونت آیکون Font Awesome و… که ما در این مطلب، به آموزش این فونت آیکون خواهیم پرداخت. نکته‌ای که باید در نظر داشت این است که تعداد فونت آیکون‌های زیادی در سراسر اینترنت هرروزه معرفی می‌شود که با یادگیری Font Awesome, شما می‌توانید از آن‌ها هم استفاده نمایید زیرا بسیار شبیه به هم هستند.

فونت آیکون‌های SVG

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

بعد از دانلود کردن و ذخیره کردن باید از پوشه fonts، فونت‌ها رو که به چهار نوع فرمت می‌باشد را در پوشه فونت خود قرار بدهیم و در CSS لینک دهید تا فونت در سایت قرار بگیرد؛ مثلاً:

@font-face {
 font-family: 'icomoon';
 src: url('../font/icomoon.eot?b1ihj2');
 src: url('../font/icomoon.eot?b1ihj2#iefix') format('embedded-opentype'), url('../font/icomoon.ttf?b1ihj2') format('truetype'), url('../font/icomoon.woff?b1ihj2') format('woff'), url('../font/icomoon.svg?b1ihj2#icomoon') format('svg');
 font-weight: normal;
 font-style: normal;
}

و برای جلوگیری از مسائل با افزونه‌های مرورگر که فونت‌ها را تغییر می‌دهند از کد زیر استفاده می‌بریم که در style.css می‌باشد و باید نام و کد فونت‌ها رو در CSS معرفی کنیم تا موقع صدا کردن در HTML بتواند آن‌ها را تشخیص بدهد و به‌درستی آن‌ها را در سایت بیاورد. برای مثال:

[class^="icon-"],
[class*=" icon-"] {
 font-family: 'icomoon' !important;
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.icon-1:before {
 content: "\e900";
}

.icon-2:before {
 content: "\e901";
}

.icon-3:before {
 content: "\e902";
}

خب در HTML برای صدازدن این آیکون‌ها کافی است فقط اسم آن‌ها را صدا بزنیم و در CSS هم آن‌ها را تغییر سایز و رنگ و هاور بدهیم.

<i class=" icon-1"></i>

برای صدازدن آیکون‌های SVG می‌توان از بیشتر تگ‌های HTML استفاده برد ولی مرسوم آن‌ها تگ <i></i> می‌باشد.

فونت آیکون‌های Font Awesome(فونتْ اَوْسام)

یکی از بهترین و کامل‌ترین فونت آیکون رایگان می‌باشد که شامل زیباترین فونت‌ها می‌باشد. برای استفاده از این فونت آیکون کافی است آن را از سایت Font Awesome دانلود کنید و دو پوشه css و font را در روت سایت خود کپی نمایید.
حال کافی است در فایل html خود و در داخل تگ head, از تگ link برای اتصال فایل css ای که در پوشه css قرار دارد استفاده نمایید. به‌صورت زیر

<link href="css/font-awesome.min.css" rel="stylesheet">

حال به‌راحتی و با یک خط کد در هر جای سایت خود استفاده کنید و در CSS هم آن را تغییر دهید. باید در نظر داشته باشیم برای صدازدن این آیکون‌ها حتماً در کلاس خود باید fa را صدا بزنیم.

<i class="fa fa-camera-retro"></i>
<i class="fa fa-amazon"></i>
<i class="fa fa-play"></i>
<i class="fa fa-bars"></i>
<i class="fa fa-car"></i>
و ...

توجه: چون تمامی این عکس‌ها به‌صورت فونت می‌باشد، می‌توانید از خاصیت‌های font و color در css استفاده نموده و سایز و رنگ فونت را زیاد یا کم نمایید.

برای اینکه راحت‌تر بتوانید فونت موردنظر را پیدا کنید و از آن استفاده ببرید به این لینک بروید،تمام فونت‌ها بانام و کد می‌توان مورداستفاده قرارداد. می‌توان فونت را بر روی سیستم خود ذخیره کنید و از آیکون‌ها هم در سایر نرم‌افزارهای دیگر مانند فتوشاپ یا ایلاستاتور استفاده کرد (زیرا این وکتور های زیبا به‌صورت فونت هستند).

فونت آیکون‌های Glyphicons(گلیف آیکون)

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

<i class="glyphicon glyphicon-search"></i>

فونت آیکون‌های livicons(آیکون‌های زنده)

نسل جدید آیکون‌های سبک و برداری لایو آیکون‌ها هستند که برای سایت شما مورد می‌توان مورداستفاده قرار گرفت. این آیکون‌ها با فرمت SVG ساخته‌شده‌اند و توسط جاوا اسکریپت پشتیبانی می‌شوند. در مرورگرهای مدرن و هر دستگاهی قابل‌نمایش می‌باشند. نمونه این آیکون‌ها در سایت سازنده یا سایت اصلی livicon  هست. نسخه این آیکون‌ها باید خریداری شود تا بتوانید استفاده کنید که متأسفانه کاربران ایرانی به دلیل وجود محدودیت در دسترسی به درگاه‌های خارج از کشور به‌سختی می‌توان از این فونت‌ها بهره ببرند.
با فرض اینکه شما این آیکون‌ها را در اختیاردارید، برای استفاده از این آیکون‌ها شما می‌توانید فایل پیش‌فرض livicon.js استفاده کنید که شامل ۴۰۴ آیکون می‌شود که این کار توصیه نمی‌شود چون به‌اندازه‌ی تمام آیکون‌ها حجم فایل افزایش پیدا می‌کند. بهترین کار این است که آیکون‌های دلخواهتان رو انتخاب کنید و در پروژه تون به کار ببرید. در این صورت حجم کمتری در سایت شما بارگذاری می‌شود.
بسته‌ای که دریافت کردید بازکنید. پوشه‌ای به نام Customizer مشاهده می‌کنید، وارد این پوشه شوید و پوشه‌ی js رو بازکنید. از بین تمامی فایل‌های js موجود شما چهار فایل رو نیاز دارید.

•  jquery-1.9.1.min.js
•  raphael-min.js
•  livicons-1.2.min.js
•  json2.min.js

سپس هر ۴ فایل را در مسیر خود در هاست یا فضا سایتتان متصل کنید و این آیکون‌های زیبا را در هر جای سایت خواستید صدا بزنید و از آن‌ها استفاده ببرید.

<i class="livicon" data-n="user-add" data-c="#000" data-hc="#ccc" ></i>

• class=”livicon”: این خصوصیت و مقدار همیشه ثابت هست.
• data-n: نام آیکونی هست که مدنظر شماست. این نام رو از همان صفحه customizerکپی کنید.
• data-c: این خاصیت رنگ آیکون رو مشخص می‌کند.
• data-hc: این خاصیت رنگ آیکون رو در زمان hoverمشخص می‌کند؛ یعنی زمانی که موس روی آیکون قرار می‌گیرد رنگ آیکون به رنگ انتخابی شما تغییر می‌کند.

این آیکون‌ها خاصیت‌های مختلی دارند که می‌توان آن‌ها را تغییر داد که شامل تکرار انیمیشن، تغییر رنگ انیمیشن، بازه زمانی اتفاق افتادن انیمیشن و… .