بخش مقالات آکادمی | Articles
آخرین آموزش ها

در مقاله قبلی درباره آیکون ها به شما سایت کتابخانه ایی آیکون Font Awesome رو معرفی کردیم. در این قسمت گفته های خودمون رو در باره این کتابخانه و استفاده های اون، کامل میکنیم.
نکته: توجه داشته باشین که کدهای گفته شده در مقاله ها رو در ویرایشگر متن وارد کنید و اون هارو اجرا کنین تا نتیجه رو مشاهده کنین. راحتترین روش برای اینکار، کدها رو در Nodepad وارد کنین و فایل اونو با فرمت html. ذخیره کنین و بعد اونو با مرورگرتون اجرا کنین تا تغییرات انجام شده رو مشاهده کنین.

آیکون های Bordered و Pulled:

از کلاسهای آیکونی fa-border و fa-pull-right و fa-pull-left برای آیکون های مقالات استفاده میشن. کد زیر رو امتحان کنید.

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-quote-left fa-2x fa-pull-left fa-border”></i>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</body>
</html>

آیکون های پویا:

توسط کلاس fa-spin هر آیکونی رو میشه چرخوند و توسط fa-pulse اینکارو در 8 گام انجام داد. توجه کنید که مرورگرهای IE8 و IE9 از پویانمایی های CSS3 پشتیبانی نمیکند.

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″><link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-spinner fa-spin”></i>
<i class=”fa fa-circle-o-notch fa-spin”></i>
<i class=”fa fa-refresh fa-spin”></i>
<i class=”fa fa-cog fa-spin”></i>
<i class=”fa fa-spinner fa-pulse”></i>
</body>
</html>

چرخاندن و فلیپ دادن آیکون ها:

ما میتونیم با استفاده از دو کلاس fa-rotate و fa-flip  آیکون هارو چرخاند و اونهارو فلیپ داد. به مثال زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<title>Font Awesome Icons</title>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet” href=”http://cdnjs.cloudflare.com/ajax/libs/font
awesome/4.4.0/css/font-awesome.min.css”>
</head>
<body>
<i class=”fa fa-ambulance”></i>

<i class=”fa fa-ambulance fa-rotate-90″></i>
<i class=”fa fa-ambulance fa-rotate-180″></i>
<i class=”fa fa-ambulance fa-rotate-270″></i>
<i class=”fa fa-ambulance fa-flip-horizontal”></i>
<i class=”fa fa-ambulance fa-flip-vertical”></i>
</body>
</html>

آیکون های انباشته:

آیکون های انباشته شده معمولا از کلاس های fa-stack استفاده میکنند. از آن در کلاس والد به کار میبرند و باقی تغییرات رو بدین شکل میدن،مثلا؛ fa-stack-1x اندازه آیکون رو بزرگ و به همین ترتیب fa-stack-2x بزرگتر.

<span class=”fa-stack fa-lg”>
<i class=”fa fa-circle-thin fa-stack-2x”></i>
<i class=”fa fa-twitter fa-stack-1x”></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class=”fa-stack fa-lg”>
<i class=”fa fa-circle fa-stack-2x”></i>
<i class=”fa fa-twitter fa-stack-1x fa-inverse”></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span class=”fa-stack fa-lg”>
<i class=”fa fa-camera fa-stack-1x”></i>
<i class=”fa fa-ban fa-stack-2x text-danger” style=”color:red;”></i>
</span>
fa-ban on fa-camera

ثابت کردن عرض آیکون ها:

کلاس fa-fw برای ثابت کردن عرض آیکون ها استفاده میشه، این کلاس برای چیدمان های مختلف به کار میره تا نمایش اونها بهم نریزه. به ویژه کاربد این کلاس در بوت استرپ ها اهمیت زیادی دارد.

<div class=”list-group”>
  <a href=”#” class=”list-group-item”><i class=”fa fa-home fa-fw”></i> Home</a>
  <a href=”#” class=”list-group-item”><i class=”fa fa-book fa-fw”></i> Library</a>
  <a href=”#” class=”list-group-item”><i class=”fa fa-pencil fa-fw”></i> Applications</a>
  <a href=”#” class=”list-group-item”><i class=”fa fa-cog fa-fw”></i> Settings</a>
</div>

با تشکر از همراهی شما دراین مقاله.

تاریخ ارسال
30 اردیبهشت 1395
ارسال شده توسط
محمدرضا تناکیان
میزان بازدید
0 نفر بازدیدکننده
0 دیدگاه
فایلی جهت دانلود وجود ندارد !
مشخصات
حجم و فرمت :

0 دیدگاه ثبت شده

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