استفاده از fontawesome در قالب

سلام خدمت همراهان همیشگی خودم

امروز با راهنمایی و آموزش درخصوص نحوه استفاده از فونت آیکون محبوب یعنی fontawesome در خدمت شما عزیزان هستم

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

  1. افرادی که قصد یادگیری و استفاده دارند
  2. افرادی که درحال استفاده هستند
  3. افرادی که دچار مشکل در استفاده هستند

در نتیجه من هم با زبان ساده و سریع با شما هستم تا از این فونت آیکون محبوب استفاده بکنیم

قسمت اول : فراخوانی فونت در در قالب

در این مرحله ما باید فونت fontawesome رو در قالب خودمون فراخوانی بکنیم تا این آیکون ها به درستی لود بشن

برای این کار کد زیر رو در قسمت هدر سایت خودمون و بین <head> و <head/> قرار میدیم

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

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

 

قسمت دوم : فراخوانی آیکن مورد نظر

برای این کار باید به سایت fontawesome و به بخش آیکن ها بریم ( اینجا کلیک کنید )

در نوار جتسجو میتونید آیکون مورد نظر خودتون رو سرچ بکنید و روی اون کلیک کلید تا صفحه آیکن مورد نظر باز بشه

در زیر تصویر بزرگ آیکن ما در سمت چپ یک باکس هست که داخل اون کدی مثل کد زیر نوشته شده

<i class="fa fa-car"></i>

خیلی خب کافیه تا ما اون کد رو کپی بکنیم و در قسمت مورد نظر قالب خودمون قرار بدیم فقط یک نکته در این خصوص وجود داره که در مورد بعدی به اون میپردازیم

 

قسمت سوم : عدم نمایش فونت آیکن انتخابی

برخی مواقع پیش میاد که تمام کارها رو به درستی انجام میدیم ولی یک آیکون یا تمامی آیکون های ما نمایش داده نمیشن

در اولین مرحله باید گفت که بعضی از آیکون ها جزء نسخه PRO هستند و ما رایگان نمیتونیم از اونها استفاده بکنیم در نتیجه برای ما لود نمیشن!

در برخی مواقع بعضی آیکون ها نمایش داده نمیشن که دو دلیل میتونه داشته باشه :

  1. جدید بودن آیکن و عدم وجود در فونت فراخوانی شده قسمت اول
  2. نیاز به تغییر در کد نمایش فونت آیکن

که برای مورد دوم ما نمونه اون ممکنه کد بصورت

<i class="fas fa-car"></i>

نوشته شده باشه که در ابتدای اون ما fas رو میبینیم و یا ممکنه بجای s هر حرف دیگه ای نوشته شده باشه

ما باید اون رو تبدیل به fa بکنیم و حرف سوم رو حذف بکنیم ا مشکل رفع بشه!

 

قسمت چهارم : شخصی سازی استایل

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

این شخصی سازی میتونه در قالب سایز آیکون و رنگ اون و متغییر های دیگه باشه و هر دستوری که برای متن با CSS میتونیم استفاده بکنیم رو میشه برای این فونت آیکن ها استفاده کرد

برای نمونه آیکون انتخابی که من میخوایم رنگ اون رو به آبی با کد رنگ ۰۰۷dda# تبدیل بکنم

و سایز اون رو میخوام با فونت ۲۵ بنویسم برای این کار از دستور style استفاده میکنیم و کد نهایی من که در قسمت دوم آموزش داشتیم تبدیل میشه به کد زیر


<i class="fa fa-car" style="color:#007dda;font-size:25px;"></i>

 

امیدوارم این آموزش مورد توجه شما عزیزان واقع شده باشه

 

اگر در استفاده از فونت آیکون fontawsome دچار مشکل هستید میتونید داخل کامنت ها مشکلتون رو اعلام بکنید تا راهنمایی لازم درخصوص رفع مشکل به شما اعلام بشه

 

مطالب مرتبط
کامنت های شما