فونت آیکن آوسم (Font Awesome) چیست و تاثیر آن بر روی سئو چگونه است ؟

فونت آیکن آوسم (Font Awesome) چیست و تاثیر آن بر روی سئو چگونه است ؟

327
1395-06-09

 

در اکثر وب سایت ها بیشترین ابزاری که برای طراحی وب سایت استفاده می شود 2 چیز است :

1. متن

2. عکس

 

واضح است که هر عکسی با توجه به حجم بالایش مدت زمان زیادی طول می کشد تا در وب سایت به طور کامل Load شود. یعنی کاربر باید چند لحظه صبر کند تا تمام عکس های صفحه مورد نظر Load شوند.

 

اما این موضوع چرا مهم است و بدی های آن چیست ؟

1. مدت زمان Load شدن وب سایت شما در سئو بسیار تاثیرگذار است.

2. کاربر نباید در پی Load شدن عکس های وب سایت شما کلافه شود. زیرا همانطور که در مقاله "  7 راهی که ممکن است در راستای گرفتن رنک بالا فراموش کرده باشید " گفته شد، تجربه کاربر یا User Experience بسیار مهم است و شما نباید آن را با طولانی شدن زمان بارگذاری وب سایتتان خدشه دار کنید.

 

در راستای حل شدن این مشکل ابزاری تحت نام فونت آیکن (Font Icon) که ریشه آن زبان برنامه نویسی CSS است طراحی شده. این ابزار به شما کمک می کند تا جایی که ممکن است به جای عکس از کد استفاده کنید. کدهایی که پس از اجرا شدن تبدیل به عکس ها و آیکن های مختلفی شده و در نتیجه زمان اجرای آنها و یا زمان Load شدن آنها بسیار کوتاه خواهد بود.

یکی از معروف ترین و پرکاربردترین فونت آیکن های حال حاضر که با فریم ورک Bootstrap نیز هماهنگ شده است FontAwesome نام دارد.

 

در این مقاله قصد داریم تا FontAwesome  را به طور کامل برای شما عزیزان تشریح کنیم.

 

شما با استفاده از FontAwesome می توانید آیکن های بسیار زیادی را در اختیار داشته باشید که سایز، رنگ، سایه، جهت و چرخش آن قابل تغییر باشد.

 

از ویژگی های بارز FontAwesome می توان به موارد زیر اشاره کرد :

 

1. در FontAwesome ، تعداد بسیار زیاد 634 آیکن موجود می باشد.

2. برای استفاده از FontAwesome نیاز به جاوا اسکریپت (Java Script) نمی باشد.

3. با توجه به اینکه آیکن های FontAwesome ، وکتور (Vector) هستند، می توان هر سایزی را برای هر آیکنی در نظر گرفت.

4. FontAwesome برای استفاده تجاری رایگان است.

5. شما می توانید با استفاده از زبان برنامه نویسی CSS هر Style ای که می خواهید به آیکن هایتان بدهید.

6. با توجه به اینکه آیکن های FontAwesome ، وکتور (Vector) هستند، به راحتی بر روی هر نمایشگری چشم نواز به نظر می آیند.

7. FontAwesome در ابتدا برای فریم ورک Bootstrap طراحی شده ولی بر روی هر فریم دیگری نیز به طور کامل کار می کند.

8. FontAwesome قابل استفاده در Windows و Application های مختلف نیز می باشد.

9. FontAwesome برنامه نویسان را دوست دارد و به آنها کمک می کند.

 

چگونه FontAwesome را به پروژه خود اضافه کنیم؟

 

برا ی این کار فقط باید یک فایل جاوا اسکریپت (java Script) را به قسمت Head پروژه خود اضافه کنید. برای این کار 2 راه وجود دارد :

1. این فایل را می توانید از CDN مربوطه بگیرید :

<script src="https://use.fontawesome.com/f065a71a4d.js"></script>

 

2. این فایل را به طور Local در پروژه خود قرار داده و آن را در قسمت Head پروژه خود فراخوانی کنید :

 

دانلود فایل جاوا اسکریپت (Java Script) FontAwesome

 

 نحوه استفاده از FontAwesome :

 

 

برای مثال برای نمایش لوگوی FontAwesome HTML5 که مربوط به زبان برنامه نویسی HTML5 می باشد فقط کافی است دستور زیر را در کد HTML خود بنویسید :

 

<i class="fa fa-html5 fa-2x"></i>

 

خط بالا یک تگ HTML است که ریشه آن <i> می باشد.

کلاس هایی که داخل آن نوشته شده است نوع آیکن و اندازه آن را نشان می دهند.

 

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

 

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

 

مثال هایی کاربردی از FontAwesome

 

لیست آیکن های FontAwesome

 

 

امیدوارم از این مقاله استفاده بهینه رو ببرید.

در پایان اگر سوالی در ذهن شما بوجود اومد می تونید اون رو در قسمت نظرات قرار بدید تا کارشناسان وب سایت بهروتک در اسرع وقت پاسخگوی شما باشند.

کامنت ها
تاکنون نظری ثبت نشده است.
ارسال دیدگاه