دیتالایف انجین فارسی

دیتالایف انجین فارسی

پشتیبان رسمی سیستم مدیریت محتوا

استفاده از قابلیت

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

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

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

آموزش نصب
گام اول : دریافت فایل آخرین نسخه 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 در دیتالایف
نظرات کاربران
حمید صادقی در 15 فروردین 1395 - 10:47 گفته:
مدیر سایتنظرات: 463

مطلب مفیدی ست
خدا قوت

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

مهدی میرزاییان در 12 شهریور 1395 - 17:13 گفته:
میهمان

باسلام و احترام
ممنون بابت مطالب مفیدتون

ارسال نظر
نام:*
ایمیل:*
متن نظر:
  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
کد را وارد کنید: *
عکس خوانده نمی‌شود؟ کلیک کنید!