ستروکیت
Page Loder

استفاده از ابزارهای نو در طراحی سایت می‌تواند باعث سهولت در طراحی و جذابیت بیشتر سایت شما شود. یکی از این ابزارها می‌تواند فونت آیکون باشد.

 یکی از فونت آیکون‌های محبوب Font Awesome می‌باشد که در ادامه با برخی ویژگی‌ها و نحوه استفاده آن آشنا خواهیم شد.

یک فونت، ۵۱۹ آیکون

در یک مجموعه واحد،  Font Awesome یک زبان تصویری است که بسیاری از کنش‌های وابسته به وب را شامل می‌شود

بدون نیاز به جاوا اسکریپت

نگرانی کمتر بابت سازگار نبودن بدلیل آنکه نیاز به جاوا اسکریپت ندارد

مقیاس‌پذیری بی‌نهایت

آیکون‌ها در هر اندازه‌ای زیبا و جذاب خواهند بود.

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

به آسانی می‌توانید به آیکون‌ها رنگ، اندازه و هر انچه که با css امکان‌پذیر است بدهید.

نحوه استفاده

  1. ابتدا آخرین ورژن فونت را از سایت Font Awesome دانلود کنید.
  2. درکد html خود آدرس زیر را قرار دهید. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
  3. Font Awesome طراحی شده است تا با عناصر درون خطی (inline element) مانند i و span استفاده شود. کافی است نام آیکون را پس از fa- در class بگذاریم.

برای مثال:

fa-camera-retro

<i class="fa fa-camera-retro"> fa-camera-retro

fa-desktop

<i class="fa fa-desktop"> fa-desktop

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

آیکون‌های معمولی
fa-camera-retro .
 

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

فونت آیکون را می‌توانید با المان‌های inline، همانند تگ <i>  و تگ <span> بکار ببرید. ما برای کوتاه بودن از تگ <i> استفاده کردیم اما به لحاظ معنایی استفاده از تگ span صحیح‌تر است.

 fa-camera-retro
تغییر سایز فونت آیکون‌ها

fa-lg

fa-2x

fa-3x

fa-4x

fa-5x

 برای تغییر سایز فونت آیکون‌ها با توجه به اندازه المان نگهدارنده (container)، می‌توانید از کلاس‌های تعریف شده برای آن استفاده کنید. کلاس‌های fa-lg (برای افزایش ۳۳٪ سایز)، fa-2x، fa-3x، fa-4x و fa-5x برای همین منظور فراهم شده‌اند.

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x
  

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

<div class="list-group">
<a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>صفحه اصلی</a>
<a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>کتابخانه</a>
<a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>برنامه‌ها</a>
<a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>تنظیمات</a>
</div>
آیکون‌های لیستی
  • آیکون‌های لیستی
  • می‌توانند به عنوان
  • تفکیک کننده‌های لیستی
  • مورد استفاده قرار بگیرند

برای جایگزینی دایره‌های لیست‌های نامرتب خود،کافی است از کلاس‌های fa-li، fa-ul  استفاده نمایید. 

<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>آیکون‌های لیستی</li>
<li><i class="fa-li fa fa-check-square"></i>می‌توانند به عنوان</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>تفکیک کننده‌های لیستی</li>
<li><i class="fa-li fa fa-square"></i>مورد استفاده قرار بگیرند.</li>
</ul>
 
آیکون‌های Pull شده و بردر دار

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

 با کمک کلاس‌های از پیش تعریف شده fa-border، fa-pull-right، fa-pull-left به راحتی می‌توانید استایل‌های مرتبط با بردر و کلاس pull را با آیکون خود همراه کنید.


...tomorrow we will run faster, stretch out our arms farther...
And then one fine morning— So we beat on, boats against the
current, borne back ceaselessly into the past.
آیکون‌های انیمیشنی

 

اگر قصد ایجاد آیکون‌های چرخشی را دارید این کلاس‌ها به شما کمک خواهند کرد. کافی است به هر آیکونی که قصد چرخش آن را دارید کلاس fa-spin را بدهید. هم چنین کلاس تعریف شده fa-pulse حرکت چرخشی هشت مرحله‌ای را برای شما ایجاد خواهد کرد. کلاس‌ها fa-spinner، fa-refresh، fa-cog کلاس‌های هستند که در این زمینه فراهم شده اند.

<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
<i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>

<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
<span class="sr-only">Loading...</span>
چرخاندن و برعکس کردن

  normal
  fa-rotate-90
  fa-rotate-180
  fa-rotate-270
  fa-flip-horizontal
  fa-flip-vertical

برای چرخاندن و برعکس کردن آیکون‌ها می‌توانید از کلاس‌های fa-rotate-* و fa-flip-* استفاده نمایید.

<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

 

دیدگاه ها

  • مهدی

    سلام و خسته نباشید من طبق گفته شما رفتم اما ایکون ها مربع سفید میافته

    • کیانوش آسترکی

      درود بر شما. ممنون
      ممکنه نام آیکون اشتباه باشه یا اینکه آیکونی که استفاده می‌کنید رایگان نباشه. در نسخه جدید آیکون‌ها به دو دسته رایگان و پولی تقسیم شدن.

  • alireza

    سلام
    من از قالب jm-service جوملا استفاده میکنم ... دقیقا کد فراخوانی رو باید تو کدوم فایل بریزم؟؟
    صد تا index.php داره و نمیدونم کدوم اصلیه!
    لطا راهنمایی کنید...
    ممنون

  • آمنه

    با سلام. برای برای ایجاد ذره بین کنار سرچ باکس باید از چه کدی استفاده کرد؟
    با تشکر

    • نوشین خستو

      سلام.
      برای این کار کافی است از تگ span با کلاس موردنظر در کنار سرچ باکستون استفاده کنید. برای مثال:


      <span class="fa fa-search"></span><input type="text" name="search-box" value="جستجو" />

  • محمد

    سلام میخواستم بدونم چطور میشه fa icon رو رنگی کنیم و در سایت قرارش بدیم
    ممنون میشم اگه جوابش رو بلدین بهم بگین

    • کیانوش آسترکی

      سلام. شما میتونید با کدهای css به دو صورت این رو انجام بدید.
      یکی توی فایل css:
      .fa-edit {color:red}
      و یا به صورت inline:
      <i class="fa fa-edit" style="color:red;"></i>
      فقط کافیه بجای fa-edit کلاس مربوط به آیکونت رو جایگزین کنی

  • علی

    توی سایتهای ایرانی مواردی که به صورت کامل در مورد این آیکون فونتها صحبت شده و تک تک موارد رو دقیق آورده باشه وجود نداره انگار.
    البته من یه سایتی دیدم ( www.imograph.com ) که انگار تازه کارش رو شروع کرده و یه سری فایلهای آیکون و غیره رو گذاشته ولی هنوز بخش آیکون فونتش چیزی نداره.
    امیدوارم که زودتر این سایتهای فارسی بیشتر بشن

  • ali

    طبق آموزشی که گفتید عمل کردم واقا دستتون درد نکنه کار کرد ولی نمی دونم چگونه رنگشونو عوض کنم.

    • کیانوش آسترکی

      خواهش میکنم.
      کافیه کلاسش رو انتخاب کنی و بهش استایل بدی مانند زیر:
      .fa-camera-retro{ color: red; font-size:16px; }

    • کیانوش آسترکی

      ابتدا فایل زیر را در پوشه‌ css خود کپی کرده
      font-awesome.min.cssو آن را در فایل html خود لینک دهید.

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

      [path] را با مسیر درست جایگزین کنید.
      سپس فولدر fonts را به طور کامل در کنار فولدر css است کپی کنید.
      حالا میتونید از فونت آیکون استفاده کنید. 
      برای مثال متونید کد زیر را در html خود قرار دهید. نمونه کامل فونت ها در سایت منبع موجود است<i class="fa fa-camera-retro"></i>

نوشتن دیدگاه

ورود به پنل کاربری
021-88748704
setrokate_support