السلام عليكم متابعي وزوار مدونة إتقان ويب في التدوينة السابقة قمت بشرح إضافة اتصل بنا وقيلها قمت بشرح إضافة ملاحظات باللغة ماتيريال ديزاين واليوم سوف أقوم بشرح كيفية إضافة أيقونات باللغة ماتيريال ديزاين إلي القالب حتي يصبح قالب جذاب ومدهش ، فكل يعرف جوجل وكيف اكتشفت للغة ماتيريال ديزاين التي ظهرت قبل عامين والان أصبحث لغة العصر بالنسبة للمصممين المواقع الالكترونية و التطبيقات ، وجوجل تتيح لك الإستخدام هذه اللغة علي موقعك وخاصة بلوجر لأن الكثير منا يستخدم منصة بلوجر بإعتبارها أفضل منصة من حيث السرعة وسهولة الإستخدام ، درس اليوم سهل ما عليك إلا إتباع الخطوات الأتية.
شرح تركيب الإضافة :
- أولا عليك بإضافة الكود التالي قبل الوسم </head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
- بعد ذلك قم بإضافة الأكواد التالية قبل الوسم ]]></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';
}
- بعد هذا أيضا تقوم بالدخول علي هذا الموقع لحصول علي أيقونات باللغة ماتيريال ديزاين.
- ثم تقوم بإختيار أيقونة التي تريدها كما في الصورة الأتية.
- تقوم بالنسخ الكود مثلا هذا <i class='material-icons'>account_circle</i>
- ثم تذهب إلي روابط الأقسام المدونة وتقوم بإضافة لها الكود كما في الصورة الأتية.
- يمكنك تغير حجم أيقونة كما يأتي
.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}