لینک دانلود فونت مناسب برای ویندوز است. برای استفاده در وب سایت بهتر است از سایت منبع دانلود کنید: وب سایت رسمی Font Awesome
دیگر توضیحات:

همه ما از مزایای استفاده از آیکون ها در وب سایت مطلع هستیم. به صورت سنتی از روش های متفاوتی برای قرار دادن آیکون در سایت استفاده می کردیم. وجه مشترک همه آن ها استفاده از فرمت های مختلف تصویری مانند GIF، JPG یا PNG برای نمایش آیکون ها بود.


امروزه یکی از روش هایی که به لطف CSS3 جایگزین روش های سنتی شده است، استفاده از وب فونت ها است. استفاده از فونت هایی که در کنار کاراکترهای معمولی (اعداد، حروف و ...) از کاراکترهایی به شکل آیکون بهره می برند مزایای زیادی دارد. یکی از نقاط قوت فونت ها، وکتور بودن آن ها است. بنابراین می توانیم بدون افت کیفیت در هر سایزی از این آیکون ها استفاده کنیم.برتری دیگر فونت ها حجم پایین نسبت به محتویات آن است.


یکی از وب فونت هایی که به سرعت مورد توجه طراحان وب سایت قرار گرفت، Font Awesome است. Font Awesome شامل 249 آیکون (در زمان نگارش این نوشته) است. از مزایای آن می توان به موارد زیر اشاره کرد:


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


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


دریافت آخرین نسخه

با توجه به به روزرسانی های مناسب این مجموعه، پیشنهاد می شود همیشه آخرین نسخه آن را دریافت نمایید. برای دانلود می توانید به وب سایت رسمی Font Awesome مراجعه نمایید.


تعریف فونت

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


  1. <link rel="stylesheet" href="css/font-awesome.min.css">
  2. <!--[if IE 7]>
  3. <link rel="stylesheet" href="css/font-awesome-ie7.min.css">
  4. <![endif]-->

همانطور که دیده می شود، فایل font-awesome-ie7.min.css برای تنظیمات مربوط به اینترنت اکسپلورر 7 در مجموعه وجود دارد که پس از فایل سی اس اس اصلی به صفحه لینک شده است.


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


نحوه استفاده

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


استفاده به صورت معمولی داخل صفحه: (از تگ i برای درج آیکون استفاده می شود)


  1. <i class="icon-camera-retro"></i> icon-camera-retro

icon-camera-retro.gif

آیکون با سایزهای مختلف: با افزودن کلاس های icon-large، icon-2x، icon-3x و icon-4x به تگ i می توانیم سایزهای مختلف آیکون را داشته باشیم.


  1. <p><i class="icon-camera-retro icon-large"></i> icon-camera-retro</p>
  2. <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p>
  3. <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p>
  4. <p><i class="icon-camera-retro icon-4x"></i> icon-camera-retro</p>

icon-camera-retro-large.gif

چرخش آیکون ها: با افزودن کلاس icon-spin آیکون انیمیشن چرخش ساده خواهد داشت. این کلاس با آیکون های icon-spinner و icon-refresh بیشتر استفاده می شود. متاسفانه اینترنت اکسپلورر تا نسخه 10 این خصوصیت را پشتیبانی نمی کند. (تصویر زیر بدون انیمیشن قرار گرفته است)


  1. <i class="icon-spinner icon-spin"></i> Spinner icon when loading content...

icon-spin.gif

موقعیت آیکون: با افزودن کلاس pull-right یا pull-left، آیکون در سمت چپ یا راست قرار می گیرد.


  1. <i class="icon-quote-left icon-4x pull-left icon-muted"></i> Use a few of the new styles together ... lots of new possibilities.

pull-left.gif

افزودن حاشیه به آیکون: کلاس icon-border برای درج حاشیه تعریف شده است.


  1. <i class="icon-flag icon-4x pull-left icon-border"></i> Use a few of the new styles together ... lots of new possibilities.

icon-border.gif

دکمه: با ترکیب کلاس های مختلف و تگ a می توانیم دکمه های مختلفی داشته باشیم.


  1. <a class="btn" href="#">
  2. <i class="icon-repeat"></i> Reload
  3. </a>
  4. <a class="btn btn-success" href="#">
  5. <i class="icon-shopping-cart icon-large"></i> Checkout
  6. </a>
  7. <a class="btn btn-large btn-primary" href="#">
  8. <i class="icon-comment"></i> Comment
  9. </a>
  10. <a class="btn btn-small btn-info" href="#">
  11. <i class="icon-info-sign"></i> Info
  12. </a>
  13. <a class="btn btn-danger" href="#">
  14. <i class="icon-trash icon-large"></i> Delete
  15. </a>
  16. <a class="btn btn-small" href="#">
  17. <i class="icon-cog"></i> Settings
  18. </a>
  19. <a class="btn btn-large btn-danger" href="#">
  20. <i class="icon-flag icon-2x pull-left"></i>Font Awesome<br>Version 3.0
  21. </a>
  22. <a class="btn btn-primary" href="#">
  23. <i class="icon-refresh icon-spin"></i> Synchronizing Content...
  24. </a>

buttons.gif

دکمه های گروهی:


  1. <div class="btn-group">
  2. <a class="btn" href="#"><i class="icon-align-left"></i></a>
  3. <a class="btn" href="#"><i class="icon-align-center"></i></a>
  4. <a class="btn" href="#"><i class="icon-align-right"></i></a>
  5. <a class="btn" href="#"><i class="icon-align-justify"></i></a>
  6. </div>

button-groups.gif

زیر منو:


  1. <div class="btn-group open">
  2. <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a>
  3. <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="icon-caret-down"></span></a>
  4. <ul class="dropdown-menu">
  5. <li><a href="#"><i class="icon-pencil"></i> Edit</a></li>
  6. <li><a href="#"><i class="icon-trash"></i> Delete</a></li>
  7. <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li>
  8. <li class="divider"></li>
  9. <li><a href="#"><i class="i"></i> Make admin</a></li>
  10. </ul>
  11. </div>

button-dropdowns.gif

لیست ها:


  1. <ul class="icons">
  2. <li><i class="icon-ok"></i> Lists</li>
  3. <li><i class="icon-ok"></i> Buttons</li>
  4. <li><i class="icon-ok"></i> Button groups</li>
  5. <li><i class="icon-ok"></i> Navigation</li>
  6. <li><i class="icon-ok"></i> Prepended form inputs</li>
  7. </ul>

lists.gif

منو ها:


  1. <ul class="nav nav-list">
  2. <li class="active"><a href="#"><i class="icon-home"></i> Home</a></li>
  3. <li><a href="#"><i class="icon-book"></i> Library</a></li>
  4. <li><a href="#"><i class="icon-pencil"></i> Applications</a></li>
  5. <li><a href="#"><i class="icon-cogs"></i> Settings</a></li>
  6. </ul>

navigations.gif

فرم ها:


  1. <form>
  2. <div class="input-prepend">
  3. <span class="add-on"><i class="icon-envelope"></i></span>
  4. <input class="span2" type="text" placeholder="Email address">
  5. </div>
  6. <div class="input-prepend">
  7. <span class="add-on"><i class="icon-key"></i></span>
  8. <input class="span2" type="password" placeholder="Password">
  9. </div>
  10. </form>

form-elements.gif

با توجه به ماهیت این آیکون ها، در هر قسمت صفحه HTML می توانیم کد مخصوص کاراکتر را قرار دهیم. (به عنوان مثال &#61515; کد مربوط به آیکون play است. لیست این کدها در فایل دانلودی وجود دارد)


شخصی سازی لیست آیکون ها

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

منبع: نردبان