استفاده از فونت آیکون در طراحی سایت

کیانوش آسترکی ۱۲ خرداد ۱۳۹۴

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

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

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

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

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

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

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

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

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

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

نحوه استفاده

ابتدا آخرین ورژن فونت را از سایت Font Awesome دانلود کنید.
درکد html خود آدرس زیر را قرار دهید. <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
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، همانند تگ  و تگ  بکار ببرید. ما برای کوتاه بودن از تگ  استفاده کردیم اما به لحاظ معنایی استفاده از تگ 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

دیدگاه ها

مهدی

۰۹ بهمن ۱۳۹۷ 15:22:52

سلام و خسته نباشید من طبق گفته شما رفتم اما ایکون ها مربع سفید میافته
- کیانوش آسترکی
  
  ۰۹ بهمن ۱۳۹۷ 16:34:48
  
  درود بر شما. ممنون
  ممکنه نام آیکون اشتباه باشه یا اینکه آیکونی که استفاده می‌کنید رایگان نباشه. در نسخه جدید آیکون‌ها به دو دسته رایگان و پولی تقسیم شدن.
rezvan

۱۳ مرداد ۱۳۹۷ 13:05:12

سلام برای رنگی کردن حاشیه آیکون چه کدی رو باید استفاده کنم؟
- کیانوش آسترکی
  
  ۱۳ مرداد ۱۳۹۷ 13:06:51
  
  درود بر شما. اگه منظورتون رنگ پس زمینه هست.
  
  background-color: red
alireza

۱۳ مرداد ۱۳۹۷ 13:03:40

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

۰۵ مهر ۱۳۹۶ 10:52:50

با سلام. برای برای ایجاد ذره بین کنار سرچ باکس باید از چه کدی استفاده کرد؟
با تشکر
- نوشین خستو
 
 ۰۵ مهر ۱۳۹۶ 11:20:34
 
 سلام.
 برای این کار کافی است از تگ span با کلاس موردنظر در کنار سرچ باکستون استفاده کنید. برای مثال:
 
 <input type="text" name="search-box" value="جستجو" />
محمد

۲۱ تیر ۱۳۹۶ 00:22:36

سلام میخواستم بدونم چطور میشه fa icon رو رنگی کنیم و در سایت قرارش بدیم
ممنون میشم اگه جوابش رو بلدین بهم بگین
- کیانوش آسترکی
 
 ۲۱ تیر ۱۳۹۶ 03:29:53
 
 سلام. شما میتونید با کدهای css به دو صورت این رو انجام بدید.
 یکی توی فایل css:
 .fa-edit {color:red}
 و یا به صورت inline:
 
 فقط کافیه بجای fa-edit کلاس مربوط به آیکونت رو جایگزین کنی
علی

۲۷ بهمن ۱۳۹۵ 06:37:29

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

۱۸ بهمن ۱۳۹۴ 20:27:50

طبق آموزشی که گفتید عمل کردم واقا دستتون درد نکنه کار کرد ولی نمی دونم چگونه رنگشونو عوض کنم.
- کیانوش آسترکی
  
  ۱۸ بهمن ۱۳۹۴ 20:35:29
  
  خواهش میکنم.
  کافیه کلاسش رو انتخاب کنی و بهش استایل بدی مانند زیر:
  .fa-camera-retro{ color: red; font-size:16px; }
Ali

۱۷ بهمن ۱۳۹۴ 21:47:32

فایلی که دانلود کردیم بعدش چی کار کنیم.لطفا کاملتر توضیح بدید
ممنون
- کیانوش آسترکی
 
 ۱۸ بهمن ۱۳۹۴ 06:34:18
 
 ابتدا فایل زیر را در پوشه‌ css خود کپی کرده
 font-awesome.min.cssو آن را در فایل html خود لینک دهید.
 <link rel="stylesheet" href="[path]/css/font-awesome.min.css">
 [path] را با مسیر درست جایگزین کنید.
 سپس فولدر fonts را به طور کامل در کنار فولدر css است کپی کنید.
 حالا میتونید از فونت آیکون استفاده کنید.
 برای مثال متونید کد زیر را در html خود قرار دهید. نمونه کامل فونت ها در سایت منبع موجود است