آموزش افزودن آیکون به لینک‌های اجتماعی در وردپرس (در صورت تنظیم اونها با متن)

این آموزش به شما نشون میده چطور نمادهایی برای لینک‌های اجتماعی در وردپرس اضافه کنین (زمانی‌که به طور پیش‌فرض با متن تنظیم شده باشن).

لینک‌های اجتماعی ممکنه با متن یا با نمادها نمایش داده بشن. در برخی از قالب‌ها، لینک‌ها به صورت متن نشون داده میشن و گزینه‌ای برای جایگزینی متن با نماد در داشبورد وردپرس وجود نداره:

اگر برای کارهایی که انجام میدین نقشه راه نداشته باشین، ممکنه که یک مشکل واقعی به نظر برسه. به همین دلیل ما خوشحالیم که این آموزش رو به شما ارائه میدیم.

برای افزودن نماد برای لینک‌های اجتماعی وبسایت وردپرستون، لطفا مراحل ذکر شده در زیر رو دنبال کنین:

آنچه در این مطلب میخوانید:

اضافه کردن نمادهای FontAwesome:

اول از همه، شما باید نمادها رو اضافه کنین. این رو میتونین با کمک قوانین CSS انجام بدین. برای اضافه کردن قوانین، لطفا وارد پنل مدیریت وردپرس بشین و به تب Appearance -> Editor برین. فایل style.css رو باز کنین و به انتهای فایل برین.
باید قوانینی ایجاد کنین که از selectorها برای عناوین لینک‌های اجتماعی و عنصر ::before استفاده کنن. قوانین به شکل زیر خواهند بود:

[title="facebook"]::before {
  content: "" !important;
  font-family: FontAwesome !important;
  font-size: 40px !important;
}

[title="facebook"]::before {

content: "" !important;

font-family: FontAwesome !important;

font-size: 40px !important;

}

در ” ” محتوای ویژگی: باید یک نماد FontAwesome وارد کنین. برای انجام این کار، باید نماد رو از FontAwesome 3.2.1 Cheatsheet در داخل ” “ پیدا کرده و کپی کنین. (لطفا توجه داشته باشین که باید خود نماد رو کپی کنین نه کدش رو):

پست پیشنهادی : رفع خطای ذخیره ناموفق با خطای: MenusTableMenu::_getNode(1, ) failed

در این قانون میتونین اندازه فونت نمادها رو هم تعریف کنین. به عنوان مثال، با ویژگی css property font-size: 40px !important، اون رو روی 40 پیکسل قرار میدیم.
حالا باید قوانینی رو برای بقیه لینک‌های اجتماعی که در قالب استفاده میشن ایجاد کنین. قانون رو هر چند بار که لازمه کپی پیست کنین و عنوان لینک اجتماعی رو در انتخابگر [title=”facebook”] تغییر بدین. بعد، آیکون‌هایی رو که نیاز دارین از FontAwesome 3.2.1 Cheatsheet در content: “” !important کپی کنین؛ قوانین رو به صورت زیر دریافت خواهید کرد:

[title="twitter"]::before {
  content: "" !important;
  font-family: FontAwesome !important;
font-size: 40px !important;
}
 
[title="instagram"]::before {
  content: "" !important;
  font-family: FontAwesome !important;
font-size: 0px !important;
}
 
[title="google"]::before {
  content: "" !important;
  font-family: FontAwesome !important;
font-size: 40px !important;
}