آخبار الموقع
recent
404
نعتذر , لا نستطيع ايجاد الصفحة المطلوبة
  • العودة الى الصفحة الرئيسية
  • الأربعاء، 31 أغسطس، 2016

    إضافة أيقونات باللغة ماتيريال ديزاين إلي بلوجر

    إضافة أيقونات باللغة ماتيريال ديزاين إلي بلوجر


    السلام عليكم متابعي وزوار مدونة إتقان ويب في التدوينة السابقة قمت بشرح إضافة اتصل بنا وقيلها قمت بشرح إضافة ملاحظات باللغة ماتيريال ديزاين واليوم سوف أقوم بشرح كيفية إضافة أيقونات باللغة ماتيريال ديزاين إلي القالب حتي يصبح قالب جذاب ومدهش ، فكل يعرف جوجل وكيف اكتشفت للغة ماتيريال ديزاين التي ظهرت قبل عامين والان أصبحث لغة العصر بالنسبة للمصممين المواقع الالكترونية و التطبيقات ، وجوجل تتيح لك الإستخدام هذه اللغة علي موقعك وخاصة بلوجر لأن الكثير منا يستخدم منصة بلوجر بإعتبارها أفضل منصة من حيث السرعة وسهولة الإستخدام  ، درس اليوم سهل ما عليك إلا إتباع الخطوات الأتية.
    شرح تركيب الإضافة :
    1. أولا عليك بإضافة الكود التالي قبل الوسم </head>
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
    1. بعد ذلك قم بإضافة الأكواد التالية قبل الوسم ]]></b:skin>
    @font-face {
      font-family: 'Material Icons';
      font-style: normal;
      font-weight: 400;
      src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'), url(https://fonts.gstatic.com/s/materialicons/v12/2fcrYFNaTjcS6g4U3t-Y5bbKic1PW3nceB3q24YFOMg.ttf) format('truetype');
    }
    .material-icons {
      font-family: 'Material Icons';
      font-weight: normal;
      font-style: normal;
      font-size: inherit;
      display: inline-block;
      line-height: 1;
      text-transform: none;
      letter-spacing: normal;
      word-wrap: normal;
      white-space: nowrap;
      direction: ltr;
      vertical-align:middle;
      /* Support for all WebKit browsers. */
      -webkit-font-smoothing: antialiased;
      /* Support for Safari and Chrome. */
      text-rendering: optimizeLegibility;
      /* Support for Firefox. */
      -moz-osx-font-smoothing: grayscale;
      /* Support for IE. */
      font-feature-settings: 'liga';
    }

    1. بعد هذا أيضا تقوم بالدخول علي هذا الموقع لحصول علي  أيقونات باللغة ماتيريال ديزاين.
    2. ثم تقوم بإختيار أيقونة التي تريدها كما في الصورة الأتية.

    1. تقوم بالنسخ الكود مثلا هذا <i class='material-icons'>account_circle</i>
    2. ثم تذهب إلي روابط الأقسام المدونة وتقوم بإضافة لها الكود كما في الصورة الأتية.
    1. يمكنك تغير حجم أيقونة كما يأتي 
    .material-icons.md-18{font-size:18px}
    .material-icons.md-24{font-size:24px}
    .material-icons.md-36{font-size:36px}
    .material-icons.md-48{font-size:48px}
    تابعونا على

    أنا عادل إبراهيم مؤسس موقع إتقان ويب هدفي الأول هو تطوير المحتوي العربي وذلك عن طريق مدونتي التي أنشر فيها دروس وشروحات تقنية يوميا لي خبرة في البرمجة والتصميم والموشن جرافيك وغيرها

    الكاتب : Adel Ibrahim

    ليست هناك تعليقات:

    إرسال تعليق

    تصميم : عالم المدون