سلام به دوستان عزیز . امروز برای شما آموزش افزودن فونت آیکون به قالب وردپرس را آماده کرده ایم . فونت آیکون ها میشود گفت در اکثر سایت های امروزی استفاده میشود . ممکن است شما سایت فروشگاهی داشته باشید ، آیکون سبد خرید شما و تسویه و ثبت نام و … معمولا فونت آیکون هستند . اگر سایت شما آموزشی یا خبری باشد به جرات میتوان گفت حداقل 4-5 آیکون در سایت شما استفاده شده است .
پس با توضیحات اولیه که داده شد مشخص شد که اهمیت فونت آیکون در سایت های امروزی زیاد است و به نوعی ضرورت خاصی در استفاده دارند . ارتباط بهتری با کاربر شما برقرار میکنند و به نوعی کاربر پسند هستند . حتی با قرار دادن یک آیکون شکل سبد خرید شما به راحتی متوجه خواهید شد که منظور از این آیکون چیست .
انواع فونت آیکون
در حال حاضر چندین فونت آیکون وجود دارد . اما احتمالا شما حداقل نام یکی را شنیده اید که FontAwesome است . بغیر از این فونت فونت های دیگری نیز است که آنها را به شما معرفی میکنیم :
- قلم عالی Font Awesome
- نمادهای عمومی Genericons
- آیکون ماه IcoMoon
- نمادهای خطی Linearicons
- متریال آیکون گوگل Material Icons by Google
- اسم پروژه The Noun Project
اگر شما تا کنون فونت آیکون ندیده اید و احیانا نمیدانید منظور ما از فونت آیکون چیست ، کافیست نگاهی به تصویر زیر بیندازید . هر کدام از آیکون های موجود در تصویر زیر در واقع یک حرف از حروف الفبای آن فونت میباشد .
خب حالا که با فونت آیکون و اهمیت استفاده از آن در سایت خود آشنا شدید بهتر است به سراغ آموزش برویم .
آموزش افزودن فونت آیکون به قالب وردپرس با افزونه
یکی از راحت ترین و بهترین روش ها استفاده از افزونه است . در حال حاضر فونت آیکون های مختلفی وجود دارند و یکی از بهترین آنها FontAwesome است . به همین منظور افزونه وردپرسی نیز مربوط به همین فونت آیکون وجود دارد . برای استفاده و انجام آموزش کافیست افزونه Font Awesome را نصب و فعال کنید . پس از نصب و فعال سازی افزونه قالب شما امکان استفاده از فونت آیکون را خواهد داشت . نحوه استفاده از این فونت ها با استفاده از کد کوتاه یا همان شورت کد ها میباشد . یکی از این نمونه ها مشابه کد زیر میباشد :
[icon name=”rocket”]
شما میتوانید کد بالا را در بلاک کد کوتاه یا به صورت متن معمولی استفاده کنید . تصویر زیر گویای نجوه عملکرد کار شما میباشد :
نتیجه نیز مشابه تصویر زیر خواهد شد .
برای اینکه نام آیکون مد نظر خود را پیدا کنید میتوانید از Cheatsheet FontAwesome استفاده کنید .
امیدوارم از این آموزش استفاده کافی برده باشید . خوشحال میشیم اگه سئوالی یا نظری داشته باشید در پایین همین مطلب بخش نظرات اعلام کنید . همچنین اگر به دنبال لینک دانلود افزونه اعلام شده توی این مطلب میگردید پایین همین نوشته برای شما قرار داده شده است .