أيقونة الخطوط رائعة لموقعك: وإليك لماذا

الإعلانات

لقد سمعت برموز ، ومن المؤكد أنك سمعت عن الخطوط ، ولكن ما هو رمز الخط? سأعرض لك اليوم ما هي خطوط الرموز ، وكيف يمكنك استخدامها لتنشيط موقع الويب الخاص بك. هيا بنا نبدأ.

ما هي الخطوط الأيقونة؟

خطوط الأيقونات هي بالضبط نفس الخطوط "العادية" - فهي تحدد شكل ومظهر قطعة النص. الفرق الكبير هنا هو أن خطوط الأيقونات لا تحتوي على أحرف وأرقام ، ولكن الرموز والرموز. قد تكون في حيرة من أمرك ، لأن ما هو الخط هو الخط إذا كنت لا تستطيع كتابة رسائل لأمك!

تستخدم خطوط الرموز بشكل أساسي لتصميم مواقع الويب. نظرًا لكونها متجهة ، يمكن تغيير حجمها ونقلها وتصميمها وتغييرها باستخدام CSS 5 خطوات للأطفال لتعلم CSS وتصبح ساحرة CSS للركلةCSS هي أهم صفحات التغيير التي شاهدتها صفحات الويب في العقد الماضي ، وقد مهدت الطريق لفصل الأسلوب والمحتوى. في الطريقة الحديثة ، XHTML يحدد البنية الدلالية ... اقرأ أكثر . يوفر هذا ميزة كبيرة على أساليب التصميم التقليدية مثل الصور. يمكن تغيير شكل ومظهر عدد كبير من الرموز من خلال بضعة أسطر من التعليمات البرمجية. ليس عليك تحرير أي صور أو فتح Photoshop أو تحميل الملفات الجديدة - ما عليك سوى كتابة التعليمات البرمجية.

ابدء

سأستخدم الخط رائع لهذه الأمثلة ، ولكن يمكن تطبيق النظرية على العديد من حزم الخطوط الأخرى.

إليك HTML بداية:

هذا هو الحد الأدنى لمقدار HTML المطلوب لإنتاج صفحة ويب. لن أشرح معظمها ، حيث قمنا بتغطية ذلك في دليلنا على كيفية جعل موقع على شبكة الانترنت.

الخط الأكثر أهمية هو ما يلي:

هذا تحميل ورقة أنماط الخط رائع من CDN. بدون هذا الخط ، لن يعرف موقع الويب الخاص بك ما هو Font Awesome ، لذلك فهو مهم للغاية. تتعامل ورقة الأنماط هذه مع كل العمل الشاق المتمثل في دمج خطوط الويب ، وتجعل الأمور أسهل بالنسبة لك عمومًا.

الخط يتم تعريف الرموز الرائعة بواسطة فئات CSS المضافة إلى أنا العلامات. تم اختيار هذه لأنها لا تحتوي على أي متصفح أو التصميم الافتراضي المحدد المرفقة بها ، لذلك لن أفسد الرموز الخاصة بك. بدلاً من ذلك ، يمكنك إضافة الفئات إلى امتداد العلامات ، ولكن هذا لا تشوش HTML الخاص بك.

إليك الاستخدام الأساسي. ضع هذا داخل الجسم علامات:

 أيقوني الأول

إليك ما يبدو عليه:

ما مدى سهولة ذلك؟ دعنا نقسمها. هناك نوعان من الفصول اللازمة لتشغيل Font Awesome. الأول يسمى اتحاد كرة القدم، والتي تقف على الخط رائع. هذا ضروري لأي رمز ، بغض النظر عن أي رمز تستخدمه. تحدد الفئة الثانية الرمز المحدد الذي ترغب في استخدامه - فقد يكون هذا أي شيء أو طائرة أو شخصًا أو بطاقة ائتمان. هذا مسبوق أيضًا بـ اتحاد كرة القدم، وبما أن هذا هو رمز الترس ، اسمها هو كرة القدم-ترس. يمكنك عرض قائمة بجميع الرموز في الخط ممتاز على موقعه على الانترنت.

حاول تغيير الرمز من الترس إلى أي واحد آخر.

الذهاب أعمق

بمجرد معرفة الأساسيات ، حان الوقت لبعض الحيل المتقدمة.

إذا كنت لا ترغب في كتابة CSS الخاص بك ، يمكنك استخدام الأنماط المضمنة في Font Awesome. هناك العديد من الفئات التي يمكنك استخدامها لتكبير الرموز:

فئة أخرى مفيدة للاستخدام هو اتحاد كرة القدم تدور. هذا سيجعلك تدور الأيقونات ، وعند دمجها مع فئات الحجم السابقة ، يمكنك إنتاج بعض التأثيرات الرائعة. إليك الكود:

ها هي النتيجة:

من السهل تدوير الرموز - استخدم اتحاد كرة القدم تناوب صف دراسي:

يحدد الرقم في النهاية درجات الاستدارة للأيقونة ، لكن لا يتم ترحيلها. أنت مقيد بـ 90, 180أو 270.

خدعة أخيرة يمكنك القيام بها هي التراص. ال اتحاد كرة القدم كومة فئة تمكنك من الجمع بين اثنين أو أكثر من الرموز معا. إليك الكود:

إليك ما يبدو عليه:

بمجرد البدء في الجمع بين كل هذه الطبقات المختلفة ، فإن الاحتمالات لا حصر لها.

لغة تنسيق ويب حسب الطلب

لأن الخطوط رمز هي مجرد الخطوط ، يمكنك تصميمها باستخدام CSS مثلما تفعل مع أي عنصر آخر. باستخدام CSS3 القليل يمكن أن تقطع شوطا طويلا

إليك HTML لهذا الرمز:

إليك CSS:

keyframes move {from {margin-left: 0؛ } إلى {margin-left: 400px؛ } } .bike {animation-name: move؛ مدة الرسوم المتحركة: 4s؛ }

هذا CSS أساسي للغاية ، لكن له تأثير كبير. هذا ليس تعليميًا لـ CSS ، لذلك قد ترغب في ذلك تعلم CSS 10 أمثلة بسيطة على كود CSS يمكنك تعلمها في 10 دقائقهل تريد معرفة المزيد حول استخدام CSS؟ جرب هذه الأمثلة الأساسية لرمز CSS للبدء بها ، ثم طبّقها على صفحات الويب الخاصة بك. اقرأ أكثر إذا كنت تريد معرفة المزيد عن الأعمال الداخلية.

يمكنك القيام ببعض الأشياء الخاصة إذا كنت تريد حقًا:

هذا التعتعة قليلا من أجل تقليل حجم ملف الويب. إليك HTML:

إليك CSS:

keyframes fade {from {opacity: 0؛ } إلى {opacity: 1؛ } } .person {opacity: 0؛ اسم الرسوم المتحركة: fade؛ } # p1 {color: red؛ مدة الرسوم المتحركة: 2 ثانية ؛ } # p2 {color: orange؛ مدة الرسوم المتحركة: 4s؛ } # p3 {color: green؛ مدة الرسوم المتحركة: 6s؛ } # p4 {مدة الحركة: 8 ثوانٍ ؛ }

مثل المثال السابق ، يستخدم هذا الرسوم المتحركة CSS3. الرسوم المتحركة ودعا تلاشى تم إنشاؤه ، ويقوم أيقونة كل شخص بتنفيذ هذه الرسوم المتحركة مع اختلاف التوقيت. هناك الكثير من الإمكانيات للتطور مع هذه الرموز و CSS3.

هذا كل شيء لهذا اليوم. يجب أن تكون قادرًا الآن على استخدام Icon Fonts لتنشيط موقع الويب الخاص بك! إذا لم تكن متأكدًا من مهاراتك حتى الآن ، فراجع هذه المهارات مواقع قوالب CSS 11 قالب مواقع CSS: لا تبدأ من نقطة الصفر!هناك الآلاف من قوالب CSS المجانية المتاحة على الإنترنت ، والتي تضم جميعها اتجاهات وتقنيات التصميم الحديثة. يمكنك استخدامها في شكلها الأصلي ، أو تخصيصها لجعلها خاصة بك. اقرأ أكثر أو هؤلاء قنوات YouTube للبدء تريد أن تتعلم تصميم المواقع؟ 7 قنوات يوتيوب لتبدأيحتوي YouTube على آلاف مقاطع الفيديو والقنوات للمبتدئين في تصميم المواقع الإلكترونية. نحن هنا ننظر إلى بعض من الأفضل للبدء. اقرأ أكثر مع تصميم المواقع.

هل تعلمت شيئا جديدا اليوم؟ ما هو رمز الخط المفضل لديك؟ اسمحوا لنا أن نعرف في التعليقات أدناه!