چگونگی استفاده از فونت‌آیکون‌های وردپرس

فونت‌آیکون وردپرس ( Dashicons )
پیش‌نمایشی از آیکون‌های وردپرس
همان طور که می‌دانید پیشخوان وردپرس ( نسخه ۳٫۸ به بعد ) به صورت واکنش‌گرا طراحی شده است . به همین خاطر طراحان وردپرس تصمیم گرفتند که برای آیکون‌های منوهای این بخش از فونت‌آیکون استفاده کنند. در واقع قلم‌هایی که کاراکترهای آن اشکال و شمایل بوده و قابل استفاده در دنیای وب باشند فونت‌آیکون نامیده می‌شوند. یکی از مزایای فونت‌آیکون آن است که همانند قلم‌های معمولی با بزرگنمایی صفحه ، کاراکترهای آن افت کیفیت پیدا نمی‌کنند .
فونت‌آیکون‌ها در طراحی قالب‌های وب‌گاه و رابط‌های کاربری تحت وب کاربرد دارند. اکثر وب‌گاه‌های امروزی برای زیباتر شدن ظاهر وب‌گاهشان از آن‌ها استفاده می‌کنند . طراحان وردپرس هم فونت‌آیکونی را طراحی نمودند تا بتوان در محیط وردپرس از آن استفاده نمود . این فونت‌آیکون که اختصاصاً برای وردپرس طراحی شده است ، Dashicons نام دارد . همان طور که در ابتدای مطلب هم ذکر گردید شما می‌توانید در وردپرس ۳٫۸ به بعد از شمایل ( آیکون‌ ) های موجود در این فونت‌آیکون استفاده کنید .

برای استفاده از شمایل ، ابتدا به وب‌گاه زیر مراجعه نمایید . این وب‌گاه تمام شمایل وردپرس را برای سهولت و آسانی کار جمع‌آوری نموده است .

http://melchoyce.github.io/dashicons/

همان طور که مشاهده می‌کنید در ابتدای صفحه وب‌گاه مورد نظر ، یک آیکون به صورت تصادفی به همراه چهار مشخصه بارگذاری شده است . این چهار مشخصه عبارتند از : Name ، Copy CSS ، Copy HTML ، Copy Glyph .

الف ) Name :
فرض کنید افزونه یا قالبی برای وردپرس نوشته‌اید که هنگام نصب، یک منو به بخش پیش‌خوان اضافه می‌کند . این منو به طور پیش‌فرض از آیکون « dashicons-admin-generic » استفاده می‌کند . برای تغییر آیکون منو کافی است از لیست آیکون‌ها ، آیکون مورد نظر خود را انتخاب کنید و سپس مقدار آرگومان menu_icon تابع add_menu را برابر نام آیکون انتخابی قرار دهید .
مثال : اگر کد زیر را در فایل functions.php قالب یا فایل اصلی افزونه کپی کنید، کد زیر منویی به نام Links با آیکون dashicons-admin-links به منوهای بخش پیش‌خوان اضافه می‌کند .
$page_title = "Links";
$menu_title = "Links";
$capability = "manage_options";
$menu_slug = "link";
$function = "link_function";
$menu_icon= "dashicons-admin-links";
$position = "";
add_menu_page($page_title, $menu_title, $capability, $menu_slug, $function,$menu_icon);

ب ) Copy CSS :
اگر می‌خواهید با استفاده از CSS از آیکون‌ها استفاده کنید کافی است بر روی پیوند Copy CSS در سمت راست آیکون انتخابی کلیک کرده و پس از گرفتن کد تولیدشده، آن را در class یا id مورد نظرتان قرار دهید .

مثال : کد زیر یک کلاس در CSS را تعریف می‌کند و محتوای هر تگی را که از کلاس مربوطه استفاده می‌کند برابر محتوای همان کلاس قرار می‌دهد .

:: کد بارگذاری فایل CSS :
<link rel="stylesheet" href="css/dashicons.css">
:: کد CSS :
.link:before
{
    content: "\f103";
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 20px/1 'dashicons';
    vertical-align: top;
}
:: کد HTML :
<div class="link"></div>
در CSS کلاسی به نام link تعریف شده است که محتوای آن آیکون dashicons-admin-links می‌باشد . در تگ div در HTML از آن کلاس استفاده شده است .

ج ) Copy HTML :
این بخش زمانی مورد استفاده قرار می‌گیرد که بخواهید با استفاده از دستورات ساده HTML آیکون مورد نظر خود را بارگذاری کنید . برای تولید کد کافی است بر روی پیوند Copy HTML کلیک نمایید .
مثال : کد زیر در HTML آیکون dashicons-admin-links را بارگذاری می‌کند .
<div class="dashicons dashicons-admin-links"></div>

د ) Copy Glyph :
اگر نیاز دارید تا کاراکتر مربوط به آیکون موردنظرتان را در فونت‌آیکون وردپرس بدانید و همچنین از آن استفاده کنید ، این گزینه نیاز شما را برآورده خواهد ساخت . برای دریافت کاراکتر ، کافی است بر روی پیوند Copy Glyph کلیک نمایید .
گلیف ( Glyph ) ، در واقع تصویر یک نماد در سامانه‌ی نوشتاری است . (+)
مثال : با قراردادن کاراکتر  در صفحه ، آیکون dashicons-admin-links نمایش داده می‌شود.

دیدگاه زیبای شما

در پایین مشخصات خود را پر کنید یا برای ورود روی شمایل‌ها کلیک نمایید:

نشان‌وارهٔ وردپرس.کام

شما در حال بیان دیدگاه با حساب کاربری WordPress.com خود هستید. بیرون رفتن / تغییر دادن )

تصویر توییتر

شما در حال بیان دیدگاه با حساب کاربری Twitter خود هستید. بیرون رفتن / تغییر دادن )

عکس فیسبوک

شما در حال بیان دیدگاه با حساب کاربری Facebook خود هستید. بیرون رفتن / تغییر دادن )

عکس گوگل+

شما در حال بیان دیدگاه با حساب کاربری Google+ خود هستید. بیرون رفتن / تغییر دادن )

درحال اتصال به %s