آموزش کار با افزونه WP SVG icon

خانه » بلاگ » طراحی سایت » آموزش کار با افزونه WP SVG icon

آموزش افزونه ایجاد live icon

آموزش افزونه WP SVG icon : اکنون می توانید از پکیج آیکون های مورد علاقه خود در پست ها و صفحات وردپرس استفاده نمایید! همچنین این افزونه به صورت پیش فرض ۵۰۰ آیکون متنوع را جهت جایگذاری در نقاط مختلف پوسته به سایت وردپرسی شما خواهد افزود.

مهمترین کاربرد این افزونه این است که با نصب این افزونه می توانید آیکون های مناسب را در هر جایی از سایت تان مانند کنار عناوین منو و لیست ها و… به راحتی استفاده کنید. با وب یار همراه باشید تا در ادامه آموزش طراحی سایت در اصفهان افزونه کاربردی دیگری را برای شما معرفی کنیم.

ویژگی های افزونه WP SVG icon

•  افزودن بیش از ۵۰۰ آیکون پیش فرض با نصب افزونه
• امکان بارگذاری آیکون های دلخواه SVG
• دانلود و درون ریزی پک سفارشی آیکون فونت ها از IconMoon
• جایگذاری آیکون درون نوشته های به صورت مستقیم
• کلاس های پیش فرض تعریف شده جهت نمایش آیکون ها
• دسترسی سریع به کد آیکون ها از طریق صفحه افزونه

نحوه استفاده از آیکون های SVG با WP SVG icon

جهت دسترسی به کتابخانه آیکون ها پس از نصب و فعال سازی افزونه، از طریق منوی کناری وردپرس WP SVG Icons را انتخاب نمایید :

 

در این صفحه لیست کاملی از آیکون های قابل مشاهد خواهد بود. جهت انتخاب آیکون دلخواه خود بر روی آیکون مورد نظر کلیک نمایید ، تصویر این آیکون در ابتدای صفحه به همراه کد اختصاصی آن در بخش How To Use نمایش داده خواهد شد:

کد مارک شده را از کادر مقابل کلمه example کپی و در مکان مورد نظر جایگذاری نمایید.

جهت ویرایش مشخصات آیکون ها به دو روش می توانید عمل کنید :

1. افزودن صفات css به تگ span : در این روش می بایست صفت css مورد نظر خود را با استفاده از style به تک تک آیکون ها اضافه نمایید.
   <div data-icon=”” style=”font-size:3em;”></div>

   ۱	<div data–icon=“” style=“font-size:3em;”></div>

2. افزودن کلاس دلخواه به تگ span : جهت افزایش سرعت بارگیری صفحات و  خودداری از کدنویسی های تکراری کلاس خاصی را به تگ span کدها افزوده سپس این کلاس را در شیوه نامه پوسته معرفی نموده ویرایش می نمایید :

   <div data-icon=”” class=”wordpress-icon”></div></p><br /><br /><br /><br /> <p>.wordpress-icon{<br /><br /><br /><br /><br /> color:#007ab7;<br /><br /><br /><br /><br /> font-size:3em;<br /><br /><br /><br /><br /> border : 1px dashed #007ab7;<br /><br /><br /><br /><br /> border-radius : 4px;<br /><br /><br /><br /><br /> padding : 5px;<br /><br /><br /><br /><br /> }

   ۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹

   <div data–icon=“” class=“wordpress-icon”></div> .wordpress–icon{ color:#007ab7; font–size:3em; border : 1px dashed #007ab7; border–radius : 4px; padding : 5px; }

انتخاب آیکون های دلخواه از IconMoon و درون ریزی آنها

1. به IconMoon مراجعه نموده و آیکون های دلخواه خود را انتخاب نمایید ( توصیه می شود برای افزایش سرعت بارگیری سایت  به جای پک اصلی افزونه یا پک کامل آیکون فونت ها ، آیکون های دلخواه خود را انتخاب نموده درون ریزی نمایید .)
2. می توانید آیکون های بیشتری را از کتابخانه IconMoon وارد نمایید.
3. بر روی دکمه Font در انتهای صفحه (IconMoon) کلیک نمایید.
4. بر روی Prefrence در ابتدای صفحه کلیک نموده نام فونت و پیشوند فونت ها را وارد نمایید (توصیه می شود با – پایان یابد).
5. بعد از ذخیره ، روی دکمه Download در انتهای صفحه کیلک نمایید.
6. پک دانلود شده را از صفحه افزونه درون ریزی نموده از آیکون لذت ببرید.