10/01/2017

settings_overscan print announcement

لابد أنك تستخدم خط من مكتبة google fonts على قالب مدونتك ولكن آن الأوان لتجرب مكتبة رموز material icons المقدمة والمدعومة من google هي نفس التقنية المتبعة مع أيقونات font awesome إلا أنها أكثر دناميكية فلا ننسى أنها  المجموعة  الرسمية من جوجل  المتاحة بشكل عام  لدمجها في المنتجات والمشاريع الخاصة بنا  تحت ترخيص Apache 0.2. بدون حق الإسناد , فقط الشيء الوحيد الذي يطلبه المطور هو أنك لا تبيع هذه الرموز.





الواجهة المادية لمكتبة material icons

عند إنتقالك إلى منصة material icons ستلاحظ أنه يتم عرض الرموز على واجهة بسيطة وحديثة إذ يتم إنشاء كل رمز باستخدام المبادئ التوجيهية  في التصميم وحسب المفاهيم العالمية المستخدمة عادة في جميع أنحاء واجهة المستخدم. كما أن الواجهة صممت بحيث تضمن سهولة القراءة والوضوح للمستخدم العادي. (إضغط على الصورة للعرض الكامل)



أضف أنها توفر كل من الأحجام الكبيرة والصغيرة،  مع إمكانية الإقتباس أو التضمين أو التحميل بمجرد الضغط على الأيقونة المطلوبة ستنبثق لك نافذة تحكم شبيهة بالتي نراها في مكتبة خطوط غوغل google fonts



تلاحظ هنا إسم الأيقونة وإمكانية تغيير الحجم و اللون في حالة أردت تحميل الأيقونة بالصيغة SVG أو PNGs والأهم في موضوعنا هو كود التضمين الذي يفتح معك عند الضغط على ICON FONT < >


  1. تلاحظ داخل الإطار المحدد نوعين من شفرة التضمين
  2. - الشفرة الأولة للمتصفحات الحديثة تستخدم فيها ميزة  ligatures
  3. - الشفرة الثانية بالنسبة إلى متصفح إنترنات إكسبلور IE9 أو أقل.


مميزات وسلبيات مكتبة material icons

نبدأ ببعض مميزات مكتبة material icons  وهي التركيز على الشكل الحديث والإحترافي للرموز والتي تتفوق بأشواط عن مكتبة  font awesome إلا أنها تتأخر في تنوع الأشكال والشمولية وهذا راجع كون المكتبة لازالت جديدة وفي كل مرة يتم إجراء تحديث نرى رموز وأشكال وتقنيات جديدة :)
تستخدم  مكتبة material icons ميزة مطبعية تسمى ليغاتوريس ligatures ، والتي تسمح بعرض الرمز فقط باستخدام اسمها النصي. فيتم استبدال إسم الرمز تلقائيا إلى شكل من قبل متصفح الويب وهذا مثاله


 <i class="material-icons">face</i> 


كما يتم دعم هذه الميزة في معظم المتصفحات الحديثة على كل من أجهزة سطح المكتب والأجهزة النقالة.

support

  • 10+IE
  • 11+Chrome
  • 3.5+Firefox
  • 5+Safari
  • 15+Opera
  • all Browser
  • 3.5+android
  • all touch



أما بالنسبة إلى المتصفحات التي لا تدعم الأحرف النصية مثل متصفح IE9 أو أقل ، يتم الرجوع  إلى تحديد الرموز باستخدام مراجع الأحرف الرقمية مثل المثال التالي:


 <i class="material-icons">&#xE87C;</i> 


- تتوفر  مكتبة material icons. على إمكانية  التنزيل المباشر للأيقونة المختارة بالصيغتين  SVG أو PNGs، وهي تنسيقات مناسبة لمشاريع الويب أو أندرويد Android أو إيوس iOS أو لإدراجها في أي أدوات التصميم. مع إمكانية إختيار اللون الأسود أو الأبيض نعلم أنه يمكن بإستعمال بعض الطرق الملتوية نتمكن من تغيير اللون الذي نريده لكن مع عدم توفر إمكانية إختيار الألوان من على المنصة نفسها مثل التي نراها أو نجدها في موقع  فيعد هذا من بين السلبيات .

- ذكرنا سابقا إماكنية إختيار الحجم المطلوب في حالة أردنا تنزيل الرمز والذي نحصل عليه في ملف مضغوط بالصيغ التابعة لكل نظام تشغيل لكن مايهمنا أكثر هو عند تضمين شفرة الرمز في قالب المدونة ستلاحظ أنه يعرض في حجم font-size: 14px; عكس مكتبة font awesome التي تعتمد على الحجم الإفتراضي font-size: 14px; فتضطر إلى ضبط هذا الوضع شبه يدويا ولا أدري إن كان هذا من السلبيات أم من الإيجابيات  :(

- ونختم هذا القسم بميزة  FILTER أو البحث السريع تماما مثل التي نجدها على موقع font awesome والتي تمكنك من إيجاد الأيقونة بمجرد إدخال الإسم الخاص به داخل إطار البحث


طريقة تضمين material icons مكتبة في قالب المدونة


سنريكم طريقة التضمين وطريقة الإستعمال كما هي موجودة في تعليمات الموقع

لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الأولى

  • قم بتسجيل حسابك ثم إذهب إلى منصة البلوجر dashboard
  • إنتقل للمدونة >> ثم إلى المظهر >> ثم إضغط على تحرير  Edit HTML  
  • إضغط في وسط محرر الأكواد  ثم   F + Ctrl لإضهار مربع البحث
  • بإستعمال  الزر  C +Ctrl  للنسخ و  V +Ctrl  للصق قم بوضع الأكواد في المكان المناسب



لاتنسى أخذ نسخة إحتياطية من القالب

الخطوة الثانية

  • قم بالبحث عن هذا الوسم </head> أسفله أي بعده قم بوضع رابط المكتبة
  • 
     <link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/> 
    
    ملاحظة مهمة
    كما تلاحظ هي نفس طريقة تضمين خط الويب في قالب المدونة ثم بعد ذلك نقوم بإستدعاء إسم الخط في المكون الذي نريد لكن مع الرموز سنستخدم كود إستدعاء للرمز المطلوب وعندنا طريقتين هما بإستعمال كود.html أو كود.css نفس العملية عند إستعمالنا مكتبة font awesome

    تضمين الرموز بإستعمال كود HTML

    face
    
    <i class="material-icons">face</i>
    
    التعديل على الكود
    الكود المحدد بهذا اللون خاص بإسم مكتبة الرموز لايتغير أبدا
    الكود المحدد بهذا اللون خاص بإسم الرمز نضع فقط إسم الأيقونة التى نريد إستعمالها
    
    <i class="material-icons">&#xE87C;</i>
    
    كما تلاحظ شكل الكود الثاني لايختلف عن الأول إلا في أحرف الترميز فبدل إسم الأيقونة face نضع الرمز الخاص بها &#xE87C; وهذا كما أشرت سابقا طريقة لتفادي مشكلة عرض الرموز مع المتصفحات الأقدم.

    طريقة التحكم في حجم ولون الرموز

    للتحكم في حجم ولون الرموز وإسترجاعها إلى القيمة الإفتراضية font-size: 14px; أو أي قيمة أو لون نريده سنقوم بالتالي
  • قم بالبحث عن هذا الوسم ]]></b:skin> فوقه أي قبله قم بوضع كود.css التالي
  • 
    /*------font size-----*/
    .material-icons.size-14 { font-size: 14px!important; } /*-حجم الخط 14-*/
    .material-icons.size-18 { font-size: 18px!important; } /*-حجم الخط 18-*/
    .material-icons.size-22 { font-size: 22px!important; } /*-حجم الخط 22-*/
    .material-icons.size-26 { font-size: 26px!important; } /*-حجم الخط 26-*/
    /*-----COLOR------*/
    .material-icons.red { color: #f14d4d; }        /*-احمر-*/
    .material-icons.gray { color: #e0e0e0; }       /*-رمادي-*/
    .material-icons.blue { color: #2196f3; }       /*-ازرق-*/
    .material-icons.Purple { color: #6c5fdd; }     /*- بنفسجي-*/
    .material-icons.orange { color: #ffb74d; }     /*-برتقالي-*/
    
    الآن سنقوم بتضمين الرمز الذي نريد بالحجم واللون الذي نريد فقط بإضافة إسم الكلاس بالعلم أنك تستطيع إضافة الحجم الذي تريد وكذلك بالنسبة للون وإليك أمثلة كيف يتم إستعمال السطر الكامل للرمز مثلا سأستعمل أحجام مختلفة للخط واللون لتكون النتيجة كالتالي...
    face
    
    <i class="material-icons size-14 orange">face</i>
    

    face
    
    <i class="material-icons size-18 red">face</i>
    

    face
    
    <i class="material-icons size-22 blue">face</i>
    

    face
    
    <i class="material-icons size-26 Purple">face</i>
    

    لاحظ أننا في كل مرة نقوم فقط بإختيار الكلاس التابع لحجم الرمز وكذلك إسم اللون مع المحافظة على المسافة بينهم

    تضمين الرموز بإستعمال كود Css

    لتضمين الرموز بإستخدام كود.css لابد أن تكون لديك معرفة بمتغيرات هذا النمط وكما نعلم عند إستعمال الرموز الخطية دائما نستخدم العلامة :before أو :after ثم نحدد المحتوى بالعلامة content: والجميل مع مكتبة رموز material icons أننا نستطيع إستخدام إسم الرمز مباشرة وهذا شكله
    
    :after {
        content: 'textsms';
        font-family: Material Icons;
        font-size: 14px;
        color: #fff;
    }
    
    أساسيات الكود
    المحدد بهذا اللون خاص بإسم الرمز نضع فقط إسم الرمز أو كود الترميز للأيقونة المطلوبة
    المحدد بهذا اللون خاص بإسم المكتبة إذا تم حذفه سيظهر الإسم بدل اللأيقونة أو يظهر على شكل مربع فارغ
    المحدد بهذا اللون خاص بحجم الرمز
    المحدد بهذا اللون خاص بلون الرمز
    ملاحظة أخيرة
    هناك عدة إستعمالات أخرى لهذه المكتبة خاصة بالأجهزة اللوحية وغير ذلك ... لم نرى داعي لذكرها كوننا نهتم فقط بمنصة البلوجر لذلك من يريد المزيد حول هذا المشروع إنتقل لصفحة الدعم الفني الخاصة بمكتبة material-icons من هنا .