همان طور که می‌دانید پیشخوان وردپرس ( نسخه ۳٫۸ به بعد ) به صورت واکنش‌گرا طراحی شده است . به همین خاطر طراحان وردپرس تصمیم گرفتند که برای آیکون‌های منوهای این بخش از فونت‌آیکون استفاده کنند. در واقع قلم‌هایی که کاراکترهای آن اشکال و شمایل بوده و قابل استفاده در دنیای وب باشند فونت‌آیکون نامیده می‌شوند. یکی از مزایای فونت‌آیکون آن است که همانند قلم‌های معمولی با بزرگنمایی صفحه ، کاراکترهای آن افت کیفیت پیدا نمی‌کنند .
فونت‌آیکون‌ها در طراحی قالب‌های وب‌گاه و رابط‌های کاربری تحت وب کاربرد دارند. اکثر وب‌گاه‌های امروزی برای زیباتر شدن ظاهر وب‌گاهشان از آن‌ها استفاده می‌کنند . طراحان وردپرس هم فونت‌آیکونی را طراحی نمودند تا بتوان در محیط وردپرس از آن استفاده نمود . این فونت‌آیکون که اختصاصاً برای وردپرس طراحی شده است ، 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 نمایش داده می‌شود.
وحدتی ارتباط 