دعونا ننتقل الآن إلى التمرين التالي،
حيث سنتعرف على المزيد عن خطوط الأيقونة.
سنقوم بتحميل الخط ممتاز،
ومن ثم تضمينه في تصميم موقعنا على الانترنت.
وأيضا سنقوم تحميل bootstrap الاجتماعية
وتصميم بعض براءات الاختراع الاجتماعية ليتم تضمينها في الملعب.
للبدء، انتقل إلى مجلد الارتباك في نافذة المحطة الطرفية الخاصة بك،
وسوف نستخدم npm للذهاب وجلب Font Awesome بالنسبة لنا.
حتى في موجه، اكتب npm تثبيت الخط رهيبة ناقص حفظ.
لذلك هذا سوف يجلب الخط ممتاز في مجلد لا أحد لدينا.
وفي الوقت نفسه، ستضيف Font Awesome إلى ملف package.json الخاص بنا كتبعية.
مرة واحدة يتم جلب الخط ممتاز،
ثم يمكننا المضي قدما للاستفادة منه في موقعنا على الانترنت.
الخطوة التالية هي جلب bootstrap الاجتماعي وتثبيته في مشروعنا.
لذلك للقيام بذلك، في نوع موجه npm
تثبيت bootstrap-social @5 .1.1
ناقص حفظ.
وهذا سوف يجلب bootstrap الاجتماعية وتثبيته في مشروعنا.
الآن، نحن بحاجة إلى استخدام هذا الخط خمسة،
انها الخط ممتاز، وbootstrap الاجتماعية في موقعنا على الانترنت.
حتى الذهاب إلى index.html الحق في الجزء العلوي،
قبل ملف style.css مباشرة،
وأنا ذاهب لاستيراد كل من الخط رهيبة و بوتستراب الاجتماعية.
حتى هناك حق، دعونا نكتب في
ورقة أنماط ريل رابط href
node_modues/فونت-awesome.main.cs/font-awesome.main.css لذلك دعونا
استيراد ذلك إلى ملف index.html لدينا بالمثل،
نظرا لاستيراد التمهيد الاجتماعي.
حتى node_modules/bootstrap-social/bootsrap-social.css.
لذلك فإن هذين سوف ندرج في index.html لدينا.
وبالمثل، أنا بحاجة إلى تضمين كل من هذه في بلدي aboutus.html لذلك اسمحوا لي أن نسخ ذلك
والانتقال إلى aboutus.html ثم لصق ذلك في aboutus.html أيضا.
الآن، والعودة إلى index.html ونحن لن الاستفادة من الرموز الخط رهيبة،
وأيضا الرموز الاجتماعية بوتستراب في صفحة index.html لدينا.
الذهاب إلى شريط التنقل هذا في صفحة index.html،
والحق في هذا الرابط لصفحتهم الرئيسية،
وأنا ذاهب للذهاب في وإضافة هذا الخط رمز رهيبة.
لذلك سأقول تمتد فئة اتحاد كرة القدم فا المنزل.
لذلك يقول اتحاد كرة القدم أنني أطبق الطبقة الخط ممتاز,
اتحاد كرة القدم المنزل هو رمز محدد لرمز المنزل.
وهكذا هذا هو ما أردت استخدامه على صفحتي الرئيسية.
ثم أغلق علامة الامتداد- ثم بعد المساحة، زر الصفحة الرئيسية.
بحيث سوف تشمل رمز المنزل في هناك.
أنا ذاهب لنسخ هذا ومن ثم عن،
وأنا ذاهب إلى استخدام نفس الشيء ولكن بدلا من fa-home،
لذلك لاحظ إعطاء مسافة بين علامة امتداد الإغلاق
وحول وبدلا من fa-home أود أن أقول fa-info.
الآن هذه، لقد اكتشفت أن هذه هي الرموز التي أريد استخدامها.
يمكنك التحقق من وثائق Font Awesome
لمعرفة أي رموز معينة وكيفية تضمينها.
للقائمة سأستخدم رمز قائمة هناك.
أسمي هذا الرمز كقائمة fa.
الآن، أيضا أنا ذاهب إلى استخدام الرموز أكبر حجما.
لذلك سوف أقوم أيضًا بتضمين fa-lg
في فئات الأيقونات fa-lg.
الآن للاتصال أنا ذاهب إلى استخدام فا المنزل،
وبعد ذلك إذا كان هذا هو فا عنوان بطاقة فا-إل جي وحفظ التغييرات.
يجب تكرار نفسه،
إضافة نفس الرموز حتى في صفحة aboutus.html،
وبعد ذلك سنلقي نظرة على صفحة الويب الخاصة بنا بعد إكمال التغييرات.
بعد تعديل أيضا aboutus.html و index.html بما في ذلك الرموز،
لقد قمت بحفظ التغييرات ثم هنا أنا في صفحة الويب الخاصة بي ولاحظ
كيف تم تضمين هذه الرموز في شريط التنقل الخاص بي.
حتى تتمكن من رؤية أن هناك رمز المنزل أمام المنزل،
وهناك رمز معلومات أمام حوالي،
رمز القائمة أمام القائمة ورمز بطاقة العنوان أمام جهة الاتصال.
لذلك هذه طريقة لطيفة لإضافة بعض العناصر المرئية إلى صفحة الويب الخاصة بك.
الآن، هذا رائع
الآن ما أريد القيام به الآن هو العمل على تحديث اللقطات.
الآن، أريد استبدال فاكس الهاتف والبريد الإلكتروني مع الرموز
وأيضا تحويل كل هذه إلى أزرار وسائل الاعلام الاجتماعية هنا.
لذلك للقيام بذلك، ونحن في طريقنا للاستفادة من الخط ممتاز لهذا،
وبعد ذلك نحن في طريقنا للاستفادة من التمهيد الاجتماعي لهذا الغرض.
الذهاب إلى تذييل الصفحة index.html،
وأنا ذاهب لاستبدال الهاتف مع رمز الخط رهيبة.
لذلك أود أن أقول، «i» كما ذكرت،
يمكنك إما استخدام span أو I لتحديد رموز Font Awesome.
يستخدم موقع Font Awesome I ولكن أنا تظهر لك طريقتين محتملتين للقيام بهذه الأشياء.
لذلك أقول فا فا فا الهاتف,
أنا آسف فا الهاتف وإغلاق العلامة هنا.
وبالنسبة للفاكس، سأقوم ببساطة بنسخ هذا،
ثم للفاكس إذا كان fa-fax،
وبالنسبة للبريد الإلكتروني، يكون مغلف fa وحفظ التغييرات.
الآن تطبيق نفسه على صفحة aboutus.html.
الذهاب إلى صفحة الويب الخاصة بي،
لاحظت على الفور أن الهاتف والفاكس
والبريد الإلكتروني، يتم استبدالها الآن بالرموز المقابلة.
الآن الخطوة الأخيرة هي استخدام bootstrap الاجتماعية لاستبدال
كل هذه الروابط مع أزرار وسائل الاعلام الاجتماعية.
لإنجاز ذلك،
سنذهب إلى تذييل الصفحة ثم استبدال كل من
هذه مع الرموز المقابلة لها هناك.
لذلك أود أن أقول، أنا فئة
الخط رهيبة fa-google-plus
وإغلاق العلامة هناك.
ثم أنا ببساطة ذاهب لنسخ هذا ومن ثم تطبيق نفسه على المتبقية منها.
لذلك سأقول، الفيسبوك،
لينكدين، تويتر،
يوتيوب، وأخيرا للبريد أنا ذاهب
لاستخدام رمز المغلف هناك.
وبالإضافة إلى ذلك، لتحويل هذا إلى براءات الاختراع الاجتماعية bootstrap إلى العلامات A،
يجب علينا تطبيق الطبقات كزر زر رمز الاجتماعية،
ومن ثم زر جوجل تفعل الشيء نفسه إلى ما تبقى منها.
بالنسبة للثانية، سيكون Facebook،
ثم LinkedIn
، Twitter، Google ثم لآخر واحد،
نظرًا لأننا لا نملك زر رمز اجتماعي bootstrap للبريد،
فلن يكون لدينا أي شيء باستثناء الرموز الاجتماعية للزر.
الآن مع هذا، دعونا نذهب ونلقي نظرة سريعة على تذييلنا.
الذهاب إلى تذييل الصفحة الخاص بك، يمكنك الآن أن ترى جميع الأزرار
قد تحولت إلى أزرار الاجتماعية المقابلة هناك.
دعونا نفعل نفس التغيير على تذييل الصفحة في aboutus.html.
لذلك أنا مجرد نسخ هذا الرمز هناك ثم الذهاب إلى aboutus.html،
ومن ثم ببساطة استبدال ذلك في تذييل aboutus.html.
مع ذلك دعونا نلقي نظرة أخيرة على صفحة الويب الخاصة بنا.
الذهاب إلى صفحتنا على شبكة الإنترنت،
يمكنك أن ترى أن الآن
جميع وصلات وسائل الاعلام الاجتماعية هناك تحولت إلى أزرار وسائل الاعلام الاجتماعية هناك.
الذهاب إلى الصفحة حول،
سترى نفس الشيء في الصفحة حول أيضا.
الآن بعد الانتهاء من هذا التمرين،
قد يكون هذا هو الوقت المناسب للقيام بالتزام جيد مع الرسالة، رمز الخطوط.