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

[arash127 488]

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

---------------

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

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

برای شروع کار و استفاده از این اسکریپت فوق العاده به سایت اصلی اون برای دانلود رفته و سورس اون رو دانلود کنید

http://fortawesome.github.io/Font-Awesome/

بعد از دانلود سورس اصلی فایل فشرده رو اکسترکت کنید ما در اینجا چهار تا پوشه داریم اگر شما میخواهید فقط از ایکون فونت های این کتابخانه استفاده کنید پوشه css رو باز کرده و فایل font-awesome.min رو در پروژه خودتون قرار بدید توجه داشته باشید که فایل های سی اس اس و جاوا اسکریپتی که در آخر اسم اونها کلمه min یا mini نوشته شده نسخه فشرده شده و کم حجم هستند .

البته میتونید از سرور CDN برای فایل CSS هم استفاده کنید :

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

حالا فقط تنها کاری که میکنید این هستش که از ایکون فونت ها استفاده کنید و لذت ببرید ! روش استفاده از ایکون فونت ها هم خیلی ساده هستش فقط کافیه یک تگ درست کنید و به اون تگ کلاس شناسه آیکون مورد نظر رو بدید و برای تغییر اندازه و دادن انیمیشن حرکتی هم میتونید با کلاس دادن انجام بدید .

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

<span class="fa fa-file-excel-o"></span>

حالا برای اندازه دادن کافیه از عبارت fa-2x به بالا استفاده کنید :

    
<span class="fa fa-file-excel-o fa-2x"></span>
<span class="fa fa-file-excel-o fa-3x"></span>
<span class="fa fa-file-excel-o fa-4x"></span>

یکی دیگر از قابلیت های این کتابخانه دادن انیمیشن چرخشی به ایکون ها هستش که با کلاس fa-spinner ایجاد میشود .

<span class="fa fa-file-excel-o fa-3x fa-spiinner"></span>

منبع :websilent.com