استفاده از قابلیت Font Awesome در دیتالایف

[ad_1]

گام اول : دریافت فایل آخرین نسخه FontAwesome از وب سایت آن

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

<link media="screen" href="THEME/style/font-awesome.min.css" type="text/css" rel="stylesheet" />

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

پس از انتخاب آیکون مورد نظر روی آن کلیک کنید ، در صفحه باز شده میتوانید کد مربوط به آیکون را دریافت و در محل مناسب از قالب خود استفاده کنید.
همچنین میتوانید بجای استفاده کد در tpl از class آیکون مورد نظر در فایل css استفاده کنید .
به منظور تغییر اندازه آیکون ها می توانید کد fa-1x یا fa-2x یا fa-3x را بصورت زیر به کد آیکون مورد نظر اضافه کنید :

< i class="icon-camera-retro fa-2x" />< / i >

به منظور آشنایی با سایر قابلیت های صفحه زیر را مطالعه کنید :

موفق و سربلند باشید.

جهت حرکت چرخشی آیکون های انتظار ، کد fa-spin و fa-pulse را به صورت زیر اضاف کنید :

<i class="fa fa-spinner fa-spin" />< / i >
<i class="fa fa-spinner fa-pulse" /> < / i >

جهت چرخش آیکون ها به صورت زیر عمل کنید :

<i class="fa fa-shield">< / i > normal<br >
<i class="fa fa-shield fa-rotate-90">< / i > fa-rotate-90<br >
<i class="fa fa-shield fa-rotate-180">< / i > fa-rotate-180<br >
<i class="fa fa-shield fa-rotate-270">< / i > fa-rotate-270<br >
<i class="fa fa-shield fa-flip-horizontal">< / i > fa-flip-horizontal<br >
<i class="fa fa-shield fa-flip-vertical">< / i > fa-flip-vertical

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

< span class="fa-stack fa-lg" > <i class="fa fa-square-o fa-stack-2x">< / i > <i class="fa fa-twitter fa-stack-1x">< / i >
</span >
fa-twitter on fa-square-o<br >
<span class="fa-stack fa-lg" > <i class="fa fa-circle fa-stack-2x">< / i > <i class="fa fa-flag fa-stack-1x fa-inverse">< / i >
</s pan>
fa-flag on fa-circle<br >
<span class="fa-stack fa-lg" > <i class="fa fa-square fa-stack-2x">< / i > <i class="fa fa-terminal fa-stack-1x fa-inverse">< / i >
</span >
fa-terminal on fa-square<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">< / i >
</s pan>
fa-ban on fa-camera
استفاده از قابلیت Font Awesome در دیتالایف

[ad_2]

منبع : download32.com