استفاده از آیکون-فونت ها در وردپرس !
یکی از راه های زیباتر جلوه دادن یک سایت ، استفاده از آیکون ها برای هر آیتم است . اگر شما بخواهید برای هر قسمت از سایتتان ،یک آیکون طراحی کنید یا در اینترنت دنبال آن بگردید ، سپس تک تک آن را در هاست آپلود کنیدو بعد با css آن را به آیتم موردنظرتان اضافه کنید ، وقت بسیار زیادی از شما تلف میشود . بنا بر این در این نوشته ، یک راه بسیار ساده تر و سریع تر به نام آیکون-فونت ها را با هم بررسی خواهیم کرد !
آیکون فونت چیست ؟
آیکون-فونت ها ، در واقع یک نوع فونت هستند ، مثل تاهوما و یا نسخ ! با این تفاوت که به جای هر حرف الفبا ، یک تصویر را در خود ذخیره کرده اند . برای مثال یکی از مشهور ترین فونت-آیکون ها که حتما تا به حال با آن کار کرده اید ، windings است ! فونت-آیکون هایی که در حاضر برای استفاده وجود دارد ، تک رنگ هستند و برای طراحی های مدرن بسیار مناسب هستند !
از مزایای فونت-آیکون نسبت به تصاویر معمولی ، میتوان به بارگذاری سریع تر و راحتی استفاده اشاره کرد . برای مثال در یک تصویر معمولی ، شما برای عوض کردن رنگ آن ،باید به نرم افزارهای ویرایش تصویر متوسل شوید ،اما در آیکون-فونت ها ،به راحتی و با همان دستور معروف font-color سی اس اس ، میتوانید رنگ آیکون ها را تغییر دهید !
استفاده از آیکون-فونت ها
اگر تا به این جای این نوشته را خوانده باشید ، حتما دوست دارید از آیکون-فونت ها در سایت خود استفاده کنید . اما چگونه یک آیکون-فونت را در سایت خود داشته باشیم ؟
نسختین گام ،انتخاب یک آیکون-فونت مناسب است ! خوشبختانه فونتهایی که در وب در دسترس هستند ،رایگان هستند و این کار ما را بسیار راحت میکند . در ادامه چند فونت-آیکون مشهور و محبوب را به شما معرفی میکنیم !
Font Awesome
این فونت ، یکی از محبوب ترین آیکون-فونت های اینترنت محسوب میشود و تا الآن که من دارم این نوشته را مینویسم ، حدود ۳۷۰ آیکون دارد ! این مجموعه مدام در حال آپدیت شدن است هر روز بیشتر میشود ! این فونت ، آیکون هایش را دسته بندی های
- برنامه های وب
- واحد پول
- ویرایشگر متن
- ویدئو پلیر
- آیکون های تجاری
- آیکون های دارو و …
جا داده است . شما میتوانید بنا به نیازتان و موضوع سایتتان ، از یکی از این دسته بندی ها استفاده کنید . از مزایای دیگر این افزونه ،هماهنگی آن با اکثر مرورگرها و همچنین دستگاه هاست .
برای استفاده ی بسیار راحت از این افزونه ، میتوانید افزونه ی Font Awesome را نصب کنید . این افزونه به شما کمک میکند تا با استفاده از شورت کد ها ،آیکون ها را به نوشته ها و برگه هایتان اضافه کنید .
شما دو راه برای استفاده از آیکون های font-awesome دارید !
- استفاده از شورت کدها : غیر از نصب افزونه ، میتوانید به صورت دستی نیز کد زیر را به محل دلخواه خود اضافه کنید :
[icon name=icon-pencil]
[icon name=icon-pencil]
بعد از علامت مساوی ،باید نام آیکون موردنظرتان را وارد کنید ، لیست کامل آیکون ها به همراه نام آنها را در اینجاببینید . راه دیگر ، استفاده از کد زیر است :
<i class=”icon-home”></i>
<i class=”icon-home”></i>
همچنین شما میتوانید با استفاده از افزونه ی Font Awesome Menus plugin ، آیکون ها را به منوهای سایتتان اضافه کنید .
برای استفاده از این آیکونها در منوی خود ، کافیست نام آیکون موردنظر به بخش ‘CSS Classes’ هر آیتم از منو اضافه کنید .
استفاده از فونت-آیکون ها در ابزارک
افزونه ی دیگری از زیرمجموعه ی font awesome وجود دارد که به شما کمک میکند تا آیکون موردنظرتان را به ابزارک اضافه کنید .
کار با این افزونه بسیار راحت است ، بعد از نصب و فعالسازی آن ،گزینه ای جدید به هر یک از ابزارک های شما اضافه میشود که میتوانید با استفاده از آن ،آیکون موردنظرتان را استفاده کنید .
مطالب زیر را حتما بخوانید:
قوانین ارسال دیدگاه در سایت
- چنانچه دیدگاهی توهین آمیز باشد و متوجه اشخاص مدیر، نویسندگان و سایر کاربران باشد تایید نخواهد شد.
- چنانچه دیدگاه شما جنبه ی تبلیغاتی داشته باشد تایید نخواهد شد.
- چنانچه از لینک سایر وبسایت ها و یا وبسایت خود در دیدگاه استفاده کرده باشید تایید نخواهد شد.
- چنانچه در دیدگاه خود از شماره تماس، ایمیل و آیدی تلگرام استفاده کرده باشید تایید نخواهد شد.
- چنانچه دیدگاهی بی ارتباط با موضوع آموزش مطرح شود تایید نخواهد شد.
نظرات کاربران